CODEWITHSUNDEEP
javascriptmysqlgoogle-mapsgoogle-maps-api-3
humph2mw
humph2mw

Reputation: 31

Update Google Maps markers in real time without refreshing entire map

I've been following along with the tutorial on googles website on how to correctly implement a Google Map with MySQL data. Everything works correctly, but the only way to get the most recent markers on the map are to refresh the page. I've tried to add SetInterval to the entire function, which does work. However, every time it loops, the whole map gets refreshed. This is particularly annoying if you've moved around on the map and then it reset on you. Is there any way to make ONLY the markers refresh? The way I understand it, the newest data would have to pulled from MySQL each time in the loop. Here is my code:

<div class="container">
  <h3>Location of Devices</h3>

  <div id="map">

  </div>
</div>
<script>

var customLabel = {
    restaurant: {
      label: 'R'
    },
    bar: {
      label: 'B'
    }
  };

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(XX.XXXX, XX.XXXX),
      zoom: 17
    });
    var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP or XML file
      downloadUrl('http://XXXXX.com/XXXXXXX.php/', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var id = markerElem.getAttribute('id');
          var name = markerElem.getAttribute('id');
          var address = markerElem.getAttribute('address');
          var type = markerElem.getAttribute('type');
          var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('lat')),
              parseFloat(markerElem.getAttribute('lng')));

          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = name
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = address
          infowincontent.appendChild(text);
          var icon = customLabel[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });
          marker.addListener('click', function() {
            infoWindow.setContent(infowincontent);
            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() {}
</script>

I've tried to add setInterval() to initMap() and to downloadUrl(). I don't want to add the Interval to initMap() unless there is a way to make the code not refresh the entire map over and over. Is there any way to accomplish this?

Upvotes: 0

Views: 3054

Answers (1)

Ziya ERKOC
Ziya ERKOC

Reputation: 839

Here is my suggestion:

  1. Create a global variable named marker and initialize it in the initMap function.
  2. Whenever the location changes use marker.setPosition(new google.maps.LatLng(/*put the lat*/,/*put the lng*/)) function to set the marker to its new position.
    By that way you would not re-create marker over and over again.
    Hope that helps!

Upvotes: 2

Related Questions