Databases
StackOverflow2013
Postsdbo
POGoogle Maps API v3 - set bounds and center not working with Ajax/PHP
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps API v3 - set bounds and center not working with Ajax/PHP
    text
    copied!<p>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 <a href="https://stackoverflow.com/questions/1556921/google-map-api-v3-set-bounds-and-center">here at stackoverflow</a>. 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 <code>center</code> declaration of <code>(0,0)</code>, 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. </p> <p>Here's my current code (I've left out the icon definitions to save space):</p> <pre class="lang-js prettyprint-override"><code>function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(0, 0), zoom: 10, mapTypeId: '&lt;?php echo $maptype; ?&gt;' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("gen-xml.php?&lt;?php if($country) echo "country=$country"; if($location) echo "&amp;location=$location"; ?&gt;", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i &lt; 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 = "&lt;div class='infowindow'&gt;" + name + " &lt;br/&gt;" + address + " &lt;br/&gt;&lt;/div&gt;"; 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() {} </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload