Google Mapsv3 - set bounds and center not working with Ajax/PHP

hopefully an easy fix, but I can't see it!

[HBird]

I am trying to get the bounds and zoom functions in Google Maps API 3 to work with Ajax/PHP-generated markers and having no luck so far. The PHP-generated map works fine with manual centering and zoom but not when I add the bounds-related code. It centers at (0,0), only the first of my markers displays, and nothing happens when I click on that marker. So something is evidently going wrong in the loop.

I would be eternally grateful if someone could spot the problem! This is driving me crazy.

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);
   var center = bounds.getCenter();
   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() {}

[caribguy]

You forgot to define the LatLng object

var latLng = new google.maps.LatLng(parseFloat(item['lat']), parseFloat(item['lon']));

[HBird]

Don't I do that here?

var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lon")));

[caribguy]

Sorry, wasn't clear enough:

You create a new LatLng object and define your marker,

var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});

but when you extend your bounds, you look for myLatLng which does not seem to exist. Replace that with your point object?

Also, just in case: if the div element is created dynamically, you may have to trigger a resize event when you (re)position your map...

google.maps.event.trigger(map, 'resize')

[HBird]

Ah yes! Nice catch, thank you. Unfortunately, though, it still doesn't work. But it looks different now - instead of getting a functional map centered out in the middle of the ocean at (0,0), I now get an all-gray box (except for the Google overlays: compass, logo, etc.) that doesn't zoom or move.

Any other ideas? Does everything seem to be in the right place? I am a Javascript noob so did a bit of guessing when trying to incorporate the bounds functions into Google's sample PHP code.

Fortunately I don't create the div element dynamically - that's one less complication!

[caribguy]

I find it easiest to debug my maps by adding features one step at the time.

You might want to manually define a few markers with the data that you expect from the XML file to check that everything is in the correct format.

var markers = xml.documentElement.getElementsByTagName("marker");

I think this is all you need to create a single marker:

var marker = new google.maps.Marker({
position: latlng,
map: map,
});


[code.google.com...]

[HBird]

Thanks for the suggestion - I'll try that.