Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Please note I have not tested this as I do not have a db with xml handy</p> <p>First of all you need to split your load() function into a function that initializes the map &amp; loads the markers on domready and a function that you will use later to process the xml &amp; update the map with. This needs to be done so you do not reinitialize the map on every load.</p> <p>Secondly you need to decide what to do with markers that are already drawn on the map. For that purpose you need to add them to an array as you add them to the map. On second update you have a choice to either redraw the markers (rebuild the array) or simply update the existing array. My example shows the scenario where you simply clear the old markers from the screen (which is simpler).</p> <pre><code>//global array to store our markers var markersArray = []; var map; function load() { map = new google.maps.Map(document.getElementById("map"), { center : new google.maps.LatLng(37.80815648152641, 140.95355987548828), zoom : 13, mapTypeId : 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // your first call to get &amp; process inital data downloadUrl("nwmxml.php", processXML); } function processXML(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); //clear markers before you start drawing new ones resetMarkers(markersArray) for(var i = 0; i &lt; markers.length; i++) { var host = markers[i].getAttribute("host"); var type = markers[i].getAttribute("active"); var lastupdate = markers[i].getAttribute("lastupdate"); var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "&lt;b&gt;" + "Host: &lt;/b&gt;" + host + "&lt;br&gt;" + "&lt;b&gt;Last Updated: &lt;/b&gt;" + lastupdate + "&lt;br&gt;"; var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map : map, position : point, icon : icon.icon, shadow : icon.shadow }); //store marker object in a new array markersArray.push(marker); bindInfoWindow(marker, map, infoWindow, html); } // set timeout after you finished processing &amp; displaying the first lot of markers. Rember that requests on the server can take some time to complete. SO you want to make another one // only when the first one is completed. setTimeout(function() { downloadUrl("nwmxml.php", processXML); }, 5000); } //clear existing markers from the map function resetMarkers(arr){ for (var i=0;i&lt;arr.length; i++){ arr[i].setMap(null); } //reset the main marker array for the next call arr=[]; } 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); } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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