[JustinDupuy]

Help, I’m stuck! I have the map working fine, but I want the location to be centered to my current location whenever I open the page. I have gone back and forth through the map developers guide to figure out why it doesn’t work, but can’t get it. Here is the code, straight from the Map Developers Guide:

/**
* Called when document is loaded.
*/
phoneui.documentReadyHandler = function() {
var init = function() {
$(‘[id$=map1]’).gmapready(function(gmap) {
navigator.geolocation.getCurrentPosition(
function(geoPosition) {
var mapPos = new google.maps.LatLng(geoPosition.coords.latitude,
geoPosition.coords.longitude);
showLocation(gmap,mapPos)
},
function() {
alert(‘Unable to find current position’);
});
});
};

if (“PhoneGap” in window) {
document.addEventListener(“deviceready”, init, false);
} else {
init();
}
}

function showLocation(gmap, pos) {
gmap.setCenter(pos);
//add marker
var marker = new google.maps.Marker({
position: pos,
map: gmap,
title: “Current Location”,
clickable: false
});
}

My suspicion is that I don’t have this snippet anywhere in my code, I don’t know where it is supposed to go though. There is no documentReady() function. Only documentReadyHandler.:

//A good place to register your gmapready(gmap) callback function
//is the documentReady() function found in your MobiOne project’s
//<project>_custom.js file.

documentReady() {
$(‘#example1-map1’).gmapready(aGoogleMap) {
//map customization here
});
}

[support-octavio]

Hi,

I suggest you to download the sample and get it working. Then once you have it working this code will work but you may need to make changes to adapt it to your project, for example changing DOM node id references to match the id(s) of widgets you created in your project.

[JustinDupuy]

Thank you ovtavio for replying. I did download the sample, showlocation, and it doesn’t work there either. It centers to Dallas, Tx and I’m in Phx, AZ. If I remove the dallas, tx from the location field under map properties, it just shows a blank screen in the test center. Is there anything else I need to do other than modify the <project>_custom.js file?

[support-octavio]

@jwdupuy313,

It is really odd that example doesn’t work for you. Please check if there is a javascript error in the javascript console, if you don’t know how to check it see: http://www.genuitec.com/mobile/docs/testingAndDebugging/testingAndDebugging.html#debugger

Please share Mobione version, cordova version and a screenshot of the outcome.

[JustinDupuy]

I’m using mobione 2.3.2, with hotfix 1
Mobione is updated to Cordova 2.2

I don’t get any errors, its as if it is not even starting…just a white screen on the emulator. I put a button with an onclick alert box trying several different javascript codes (alert (mapPos);, alert (init);, alert(gmap);) to see if we were getting variables, and they all say variable undefined.:
undefined: Can’t find variable: init
Stack:
undefined ReferenceError: Can’t find variable: init

I’m still learning js so please bear with me if I’m making rookie mistakes. I believe I have done exactly what the example says, and I’ve had success with creating other apps on a pretty basic level. Here are some questions in my mind:
1. Is there any extra customization you need to do to the showlocation-example in the map developers guide? Any code I need to add? Or should it work as downloaded?
2. I have authorized the google map api in the settings window in mobione, but I am a little confused as to whether or not I need to create a google maps developer SDK key. Or does Phonegap take care of all that?

[JustinDupuy]

Update:
I added a button with the following code to run onClick:

// onSuccess Callback
// This method accepts a `Position` object, which contains
// the current GPS coordinates
//
var onSuccess = function(position) {
alert(‘Latitude: ‘ + position.coords.latitude + ‘\n’ +
‘Longitude: ‘ + position.coords.longitude + ‘\n’ +
‘Altitude: ‘ + position.coords.altitude + ‘\n’ +
‘Accuracy: ‘ + position.coords.accuracy + ‘\n’ +
‘Altitude Accuracy: ‘ + position.coords.altitudeAccuracy + ‘\n’ +
‘Heading: ‘ + position.coords.heading + ‘\n’ +
‘Speed: ‘ + position.coords.speed + ‘\n’ +
‘Timestamp: ‘ + position.timestamp + ‘\n’);
};

// onError Callback receives a PositionError object
//
function onError(error) {
alert(‘code: ‘ + error.code + ‘\n’ +
‘message: ‘ + error.message + ‘\n’);
}

navigator.geolocation.getCurrentPosition(onSuccess, onError);

I did get the position coordinates, and they are accurate. So I know it is at least functioning on that level, it just won’t draw map.

[support-octavio]

Hi jwdupuy313,

Have you tested the map example on a device? Please note that if you use the Test Center, it will show the current location that is set on it. To change it open Window menu > Settings > Geolocation and change the Latitude and Longitude.

[JustinDupuy]

Do I need to set up an API key with google maps? I tried doing that and it says it is an invalid key.

[support-octavio]

Hi,

Can you share more info? A screenshot would be very useful. Also, would be nice to see your api key and how you set it up. Did you use the settings page api key field? If you want to keep data in privacy you can send details and screenshot to support at genuitec dot com, use title mobione data from jwdupuy313

[JustinDupuy]

Thank you for your help. I have it working now. I had a multiple error situation, which just took alot of time to work through. Here is what I figured out:

1. Apparently with Google maps API v3 you do not need to have an API key. At least for the limited functions I am using on my map.
2. You must have something in the map:location property in the design center, if you don’t it will produce a white map. I thought, since I was trying to have the map open up centered on my location wherever I am, that I should leave this property blank. Doesn’t work.

I am working on adding additional functionality now…markers, updating my location with a “locate me” button, and having an icon follow me on the map. I have multiple markers working, and now I’m gaining speed on the next 2. The problem I ran across today is since my app is several pages before the “map page” opens up, my custom file was not being added to the home screen custom file. So I could open the map page directly in the test center and it worked perfectly, but when I open the home screen and click through the app to get to the map page(as it will be on a mobile device), the map page works but has no custom javascript functionality (ie…cutom markers).
Do you suggest creating all documentReadyHandler javascript functionality in the app_home_custom.js vs editing this info in the app_map_custom.js in the future?

Appreciate the help.

[support-octavio]

Hi jwdupuy313,

>2. You must have something in the map:location property in the design center, if you don’t it will produce a white map. I thought, since I was trying to have the map open up centered on my location wherever I am, that I should leave this property blank. Doesn’t work.
Thanks for sharing how you get success on your app. I’ve informed the dev team about this problem.

>Do you suggest creating all documentReadyHandler javascript functionality in the app_home_custom.js vs editing this info in the app_map_custom.js in the future?
You have to put all your javascript code in your app_home_custom.js, if you generate code of your main screen and the code of your map is in another custom.js located in another -www folder, this code will not be automatically added to main_custom.js file. See more info here: http://www.genuitec.com/mobile/docs/projectOrg/projectOrg.html#file_structure_and_gen_files

[Author]

Posts