CODEWITHSUNDEEP
javascriptgoogle-maps
Genadinik
Genadinik

Reputation: 18639

Google Map Markers Scope Problem

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

Upvotes: 0

Views: 418

Answers (3)

Maxym
Maxym

Reputation: 11896

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);
}

Upvotes: 3

KJYe.Name
KJYe.Name

Reputation: 17169

The reason i asked if the red marker was placed on the map intentionally is because there's a function in Google Map V3 API that allows dynamic center of map based on the Markers you wish to display.

You can use var myBounds = new google.maps.LatLngBounds(); and basically extend all the points you have by doing myBounds.extend(myMarker); individually. Once you have all the points in the LatLngBounds() you can use your map.fitBounds(myBounds); and the map would be centered based on the markers that are within bounds.

Google Map API LatLngBounds

Upvotes: 0

Musannif Zahir
Musannif Zahir

Reputation: 3029

Add map.panTo(center_latlng); after you define center_latlng

Upvotes: 1

Related Questions