I have been experimenting with the code provided below in an attempt to adjust the map bounds to fit the markers:
var latlngbounds = new google.maps.LatLngBounds();
latlngbounds.extend(latlng);
map.fitBounds(latlngbounds);
However, I am encountering an issue where the map consistently zooms to location 0,0.
Update 1: Interestingly, this seems to be functioning properly in IE9 but not in Chrome. Upon inspecting Chrome Developer mode, I received the following error message:
Port error: Could not establish connection. Receiving end does not exist.Update 2: After refreshing the page in IE9, the functionality also ceased to work.
Here is the code I am utilizing. I suspect there may be a fundamental mistake I am making?
//variables
var map;
var markers = [];
var latlngbounds;
//initialize google map
function initialize()
{
var myOptions = {
center: new google.maps.LatLng(-26.17706, 28.34613),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
latlngbounds = new google.maps.LatLngBounds();
//display markers
updateMarkersDisplayed();
}
//displays google map after site load complete
google.maps.event.addDomListener(window, 'load', initialize);
//retrieves markers for map
function updateMarkersDisplayed()
{
//php get url
var searchUrl = 'getCoords.php';
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markerNodes.length; i++) {
var id = markerNodes[i].getAttribute("device_id");
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createMarker(latlng, id);
latlngbounds.extend(latlng);
}
});
//zoom map to display all markers
map.fitBounds(latlngbounds);
}
//create marker and display on map if not already visible
function createMarker(latlng, id) {
var iconUrl = 'images/phones.png';
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: id,
icon: iconUrl
});
markers.push(marker);
markers[markers.length-1].setMap[map];
}
//download xml file containing markers specified by the GET parameters contained in the url passed
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.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
//parse text returned by php script
function parseXml(str) {
if (window.ActiveXObject)
{
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
else if (window.DOMParser)
{
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
//capture extra XMLHttpRequest responses
function doNothing() {}