Question

Today is my first day using the Google Maps API. Now I have a DIV with an id of “map” the following code…

function initializeMap() {

        var opts = {
            center: new google.maps.LatLng( 0, 0), // ignore the zero values for now
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'), opts);
        geocoder = new google.maps.Geocoder();
}

and I call this using window.onload = initializeMap

Okay I’d like to center the map in my current location. I know I can get the long and lat using

navigator.geolocation.getCurrentPosition(displayLocation);

function displayLocation(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude; 
 }

Now I’m a little lost with how the position object is pushed back to success handler displayLocation. Anyway how can I pass the latitude & longitude to the initializeMap() function like so…

center: new google.maps.LatLng( latitude, longitude)

I’m currently looking at the Google Maps API docs as I’m sure there’s a method to get this but I’d like to use the latitude, longitude in different functions so I guess I’m asking how can I make these variables accessible to all functions (like a global but not a bad global) instead of being only available to the displayLocation function . Sorry if this is worded poorly… if I’m confusing people please say and I’ll reword this question.

Answer 1

just declare

var latitude, longitude;

into a parent scope, so the function is

function displayLocation(position) {
    latitude = position.coords.latitude; /* no var keyword */
    longitude = position.coords.longitude; 
}

of course the choice of the scope in which you should define those variables is up to you. Also, be aware that they will be undefined until displayLocation is not called