title: Plotting coordinates dynamically from XML file and refresh Markers only
body: <p>I'm trying to plot markers on Google Maps with coordinates from XML file and below is my working script. My XML is dynamically updating. My goal is to plot coordinates my refreshing the Markers alone instead of whole page (currently achieving my using auto refresh in 5 seconds). </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;WORK&lt;/title&gt;
  &lt;style&gt;
  html, body {
    height: 100%;
    width: 100%;
    margin: 20;
    padding: 0;
  }
  
  #map_canvas {
    height: 100%;}    
  &lt;/style&gt;
  &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5ATHIZrrP1XlFhEUVfCWZ2kc4oGIRbcw&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="scripts/downloadxml.js"&gt;&lt;/script&gt;
  &lt;script&gt; 
  
  var infowindow;
  var map;
  
  function initialize() {
    var mapOptions = {
        zoom: 2,
        center: new google.maps.LatLng(51.5072, 0.1275),
  
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    downloadUrl("https://localhost/maps/data/markersfinal.xml", function(data) {
      var bounds = new google.maps.LatLngBounds();
      var markers = data.documentElement.getElementsByTagName("marker");
      for (var i = 0; i &lt; markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("Latitude")),
                                            parseFloat(markers[i].getAttribute("Longitude")));
        bounds.extend(latlng);
        var marker = createMarker(markers[i].getAttribute("information"), latlng);
      }//finish loop
      map.fitBounds(bounds);
    }); //end downloadurl
  }
  
  function createMarker(information, latlng) {
     var marker = new google.maps.Marker({
                             position: latlng,
                             icon: 'https://localhost/maps/images/marker1.jpg',
                             map: map
                             });
     google.maps.event.addListener(marker, "click", function() {
       if (infowindow) infowindow.close();
       infowindow = new google.maps.InfoWindow({content: information});
       infowindow.open(map, marker);
     });
     return marker;
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="initialize()" &gt;
  &lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;!-- &lt;meta http-equiv="refresh" content="5" &gt; --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is my Downloadxml.js srript.</p>
  
  <pre><code>/**
  * Returns an XMLHttp instance to use for asynchronous
  * downloading. This method will never throw an exception, but will
  * return NULL if the browser does not support XmlHttp for any reason.
  * @return {XMLHttpRequest|Null}
  */
  function createXmlHttpRequest() {
   try {
     if (typeof ActiveXObject != 'undefined') {
       return new ActiveXObject('Microsoft.XMLHTTP');
     } else if (window["XMLHttpRequest"]) {
       return new XMLHttpRequest();
     }
   } catch (e) {
     changeStatus(e);
   }
   return null;
  };
  
  /**
  * This functions wraps XMLHttpRequest open/send function.
  * It lets you specify a URL and will call the callback if
  * it gets a status code of 200.
  * @param {String} url The URL to retrieve
  * @param {Function} callback The function to call once retrieved.
  */
  function downloadUrl(url, callback) {
   var status = -1;
   var request = createXmlHttpRequest();
   if (!request) {
     return false;
   }
  
   request.onreadystatechange = function() {
     if (request.readyState == 4) {
       try {
         status = request.status;
       } catch (e) {
         // Usually indicates request timed out in FF.
       }
       if (status == 200) {
         callback(request.responseXML, request.status);
         request.onreadystatechange = function() {};
       }
     }
   }
   request.open('GET', url, true);
   try {
     request.send(null);
   } catch (e) {
     changeStatus(e);
   }
  };
  
  /**
   * Parses the given XML string and returns the parsed document in a
   * DOM data structure. This function will return an empty DOM node if
   * XML parsing is not supported in this browser.
   * @param {string} str XML string.
   * @return {Element|Document} DOM.
   */
  function xmlParse(str) {
    if (typeof ActiveXObject != 'undefined' &amp;&amp; typeof GetObject != 'undefined') {
      var doc = new ActiveXObject('Microsoft.XMLDOM');
      doc.loadXML(str);
      return doc;
    }
  
    if (typeof DOMParser != 'undefined') {
      return (new DOMParser()).parseFromString(str, 'text/xml');
    }
  
    return createElement('div', null);
  }
  
  /**
   * Appends a JavaScript file to the page.
   * @param {string} url
   */
  function downloadScript(url) {
    var script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);
  }
  </code></pre>
  
  <p>Here is my XML</p>
  
  <pre><code>&lt;markers&gt;
  &lt;marker information="109.127.8.242" Longitude="49.892010" Latitude="40.377670" /&gt;
  &lt;marker information="109.169.87.141" Longitude="-0.719860" Latitude="51.522790" /&gt;
  &lt;marker information="109.229.210.250" Longitude="24.105890" Latitude="56.946000" /&gt;
  &lt;marker information="109.229.36.65" Longitude="46.172170" Latitude="48.279550" /&gt;
  &lt;marker information="109.235.59.44" Longitude="12.095560" Latitude="49.015000" /&gt;
  &lt;/markers&gt;
  </code></pre>
  
  <p>Any suggestions if this is efficient way also refresh markers?</p>