Question

I am able to get the lat/lng coordinates, but somehow the system sets the center point of the map to (0,0). Would anyone be able to point me in the right direction for how to get the right lat/lng to become my center points?

The url where I am testing this is here:
http://www.comehike.com/hikes/hike_carpool.php?hike_id=125

Thank you,
Alex

Answer 1

just looked at your code:

var lat = 0;
var lng = 0;

request.onreadystatechange = function()
{
    ...
    lat = parseFloat(markers[i].getAttribute("lat"));
    lng = parseFloat(markers[i].getAttribute("lng"));
    ...
} // Closing onReadyStateChange

request.send(null);

var myLatlng = new google.maps.LatLng(lat , lng ); // Have to make the center as the hike coordinates.
var myOptions =
{
    zoom: 9,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

map is set to (0,0) because you defined lat, lng so, looks like you rely on lat, lng changing in ajax callback function, but it is asynchronous, so when browser gets to

var myLatlng = new google.maps.LatLng(lat , lng );

lat and lng in 99.99% cases will be 0, and only after some time (depending on network etc.) they will be changed, but it will be after map is built… Otherwise you have to create your map in callback function:

function createMap( lat, lng ) 
{
   var myLatlng = new google.maps.LatLng(lat , lng ); // Have to make the center as the hike coordinates.
    var myOptions =
    {
        zoom: 9,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    return new google.maps.Map(document.getElementById("map_canvas"), myOptions);    
}

function initialize( hike_id ) {
  var lat = 0;
  var lng = 0;
  var map;

  request.onreadystatechange = function()
  {
      ...
      lat = parseFloat(markers[i].getAttribute("lat"));
      lng = parseFloat(markers[i].getAttribute("lng"));
      ...
      map = createMap( lat, lng );

   } // Closing onReadyStateChange

   request.send(null);
}

shortly, you have to be sure lat and lng are defined as you need before map creation… This way it should work. Alternatively you can create map with center in (0,0) or somewhere else, but predefined, and then in ajax callback use map.setCenter( center_latlng );

also you do not create markers… your callback has

// create the marker
center_latlng = new google.maps.LatLng( lat , lng ); 
global_markers[i] = marker;

you define center_latlng value, but do not use it.. instead you put marker defined outside of callback to your markers array. Should be something like:

// create the marker
center_latlng = new google.maps.LatLng( lat , lng ); 
var hikeMarker = new google.maps.Marker({
   position: center_latlng,
   map: map,
   title:"Hike Start"
}); 
global_markers[i] = hikeMarker ;

EDIT: Took a look at your last implementation:

function createMap( center_lat , center_lng ) {
   ...
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
   ...
}

that function creates map in global scope, that’s not good until you really need it to be global. I updated my code above, so I would return map in that function (have a look). Otherwise, if you really need map to be global (meaning that something else could use it), then I would prefer another way (was shortly told above too): create map with center anywhere, then set its center in ajax callback. This way you will be sure that map is created as soon as possible, and you won’t get in trouble with “null” value (again if it is used outside initialize method, of even out of ajax callback:

function createMap( lat, lng ) 
{
   var myLatlng = new google.maps.LatLng(lat , lng ); // Have to make the center as the hike coordinates.
    var myOptions =
    {
        zoom: 9,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    return new google.maps.Map(document.getElementById("map_canvas"), myOptions);    
}

function initialize( hike_id ) {
  var lat = 0;
  var lng = 0;
  var map = createMap( lat, lng ); // create with center in (0,0); probably would be better to use San Francisco

  request.onreadystatechange = function()
  {
      ...
      lat = parseFloat(markers[i].getAttribute("lat"));
      lng = parseFloat(markers[i].getAttribute("lng"));
      ...
      map.setCenter( lat, lng ); // it will change position of map to real one

   } // Closing onReadyStateChange

   request.send(null);
}