Google Maps API v3 - set bounds and center not working with Ajax/PHP

Question

I am trying to get the automatic bounds-and-zoom functions in Google Maps API 3 to work with Ajax/PHP-generated markers and having no luck so far. The PHP-gen map works fine (with manual center and zoom) until I add the bounds-related code, which I got from here at stackoverflow. It now just centers at (0,0) in the middle of the ocean and only the first of my markers displays. The former doesn't seem totally surprising based on the initial center declaration of (0,0), but it worked for the original poster and I'm a Javascript noob so don't really know what I'm doing! I would be eternally grateful if someone could spot the problem.

Here's my current code (I've left out the icon definitions to save space):

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(0, 0),
    zoom: 10,
    mapTypeId: '<?php echo $maptype; ?>'
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("gen-xml.php?<?php if($country) echo "country=$country"; if($location) echo "&location=$location"; ?>", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("city");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lon")));
      var html = "<div class='infowindow'>" + name + " <br/>" + address + " <br/></div>";
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bounds.extend(myLatLng);
      map.fitBounds(bounds);
      bindInfoWindow(marker, map, infoWindow, html);
    }

  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

score 1 · Answer 1 · answered Mar 09 '11 at 10:21

1

Try

bounds.extend(point);

instead of

bounds.extend(myLatLng);

which seems not to be related to any part of your code

answered Mar 09 '11 at 10:21

Francesco

443
1
8
16

Thanks - you're right, that was a typo! But unfortunately it still doesn't work. Now instead of centering at (0,0) I get an all-gray background that doesn't zoom or move. Can you see any other problems? – Holly Mar 11 '11 at 21:03
@Holly: send me a link where I can have a look to your code. You can use [jsfiddle](http://jsfiddle.net/) to create a working example, then I'll have a look and try to figure out what's wrong – Francesco Mar 13 '11 at 15:09
Hi, I'm not sure whether this helps, but this is how I've done it and it works a treat: After your var markers = xml line, add this: var bounds = new google.maps.LatLngBounds(); Then change your section that starts with bounds.extend and replace with: bounds.extend(point); map.fitBounds(bounds); bindInfoWindow(marker, map, infoWindow, html); This should work. Kind regards Chris – IRHM Sep 15 '11 at 15:20

Google Maps API v3 - set bounds and center not working with Ajax/PHP

1 Answers1