I have adapted the google map xml MySQL code from here: http://ift.tt/1hkYSOS
You can search for the nearest markers from a given location. Once you select current location and range the 'click' event triggers the map to refresh with new markers.
Before filtering results I wanted to adapt this code - to add all the markers onto a new map.
So revised the code. However, when more data is added to the MySQL data the XML updates fine but when you refresh the map page the markers do not update. The request.ready state stays at '0';
The way I found round this was to add a random number to the end of the XML string. To force the XML to be reloaded. This works but seems a bit cumbersome. I am looking for a better solution.
Data updates once every 5-10 minutes, so I am not looking for a jQuery solution. Just the best way to refresh map with updated XML.
Code below:
<html xmlns="http://ift.tt/lH0Osb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Test Match</title>
<script src="http://ift.tt/1orrD4c"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var markers = [];
var infoWindow;
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
});
infoWindow = new google.maps.InfoWindow();
}
function initialize() {
var randomNumer = Math.floor((Math.random()*1000) +1);
var xmlData = 'scotmap1xml.php?m='+randomNumer;
downloadUrl(xmlData, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
//var address = markerNodes[i].getAttribute("address");
//var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createMarker(latlng, name);
bounds.extend(latlng);
}
map.fitBounds(bounds);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
function createMarker(latlng, name) {
var html = "<b>" + name + "</b>";
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(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.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
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');
}
}
function doNothing() {}
//]]>
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body style="margin:12px; padding:0px;" onLoad="load()">
<div id="map" style="width: 100%; height: 80%"></div>
</body>
</html>
No comments:
Post a Comment