I'm using the following script and having difficulty passing in the lat and lon variables I created with user's location. When I remove the lat and lon variables I created and manually put in 0,0 it works fine for debugging's sake...The map should be displayed in a div with id of map_canvas.
$(document).ready(function() {
navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lon);
var myOptions = {
zoom: 1,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions); map.setTilt(45);
});
Your problem is probably right here:
Presumably,
handle_geolocation_query
looks something like this:But
navigator.geolocation.getCurrentPosition
is an asynchronous function call:Emphasis mine.
So, your
handle_geolocation_query
callback will be called bygetCurrentPosition
when it has the position, not when you callgetCurrentPosition
. So, when you get to here:Your
position
won't necessarily contain anything useful and you probably get an error telling you thatposition.coords
is undefined or not an object or something similar.You need to move your
new google.maps.LatLng
andnew google.maps.Map
stuff to inside thehandle_geolocation_query
callback where you'll have a usefulposition
value.