Member Avatar for trektrak

I have this code as shown below. I've modified a bit to update the markers dynamically according to xml file extracting from php mysql database. There's nothing wrong with the script. The only thing I would love to do is to move the marker smoothly instead of the markers flickering waiting for an updates.. I need some help on this one...

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">





  var infowindow;
  var map;
  var markersArray = [];



  function myFunction()
{
setInterval(function(){marker()},5000);
}

  function initialize() {
    var myLatlng = new google.maps.LatLng(4.946617478978741, 114.9334716796875);
    var myOptions = {
      zoom: 10,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }


    function marker(){
    clearOverlays();
    downloadUrl("phpsqlajax_genxml3.php", function(data) {
      var markers = data.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
        var marker = createMarker(markers[i].getAttribute("user"), latlng);

       }
     });
  }

  function createMarker(user, latlng) {
    var marker = new google.maps.Marker({position: latlng, map: map});
    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: user});
      infowindow.open(map, marker);
    });
    markersArray.push(marker);
    return marker;

}

 // Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}




</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 1K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

The flicker is caused by removing and re-creating markers on every update. ’s interval + clearOverlays flow forces each marker to vanish and reappear. A smoother result comes from reusing each google.maps.Marker and moving it with small, time-based steps (tweening) instead of replacing it.

Keep a dictionary of markers keyed by ID, create a marker only once, and on each feed update either animate the existing marker to the new LatLng or create a new marker if none exists. Remove markers that disappear from the feed. Example animation (uses requestAnimationFrame and an ease-out curve):

var markersById = {}; // id -> google.maps.Marker

function animateMarkerTo(marker, toLatLng, duration) {
  var start = Date.now();
  var from = marker.getPosition();
  var fromLat = from.lat(), fromLng = from.lng();
  var toLat = toLatLng.lat(), toLng = toLatLng.lng();
  var dLat = toLat - fromLat, dLng = toLng - fromLng;

  function step() {
    var now = Date.now();
    var t = Math.min(1, (now - start) / duration);
    var ease = t * (2 - t); // ease-out
    var lat = fromLat + dLat * ease;
    var lng = fromLng + dLng * ease;
    marker.setPosition(new google.maps.LatLng(lat, lng));
    if (t < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

Notes and troubleshooting: preserve each marker’s InfoWindow/listeners so clicks still work; choose a sensible duration and update rate (shorter than the feed interval); skip animation and jump instantly if the distance is huge to avoid very long moves; throttle or debounce server polling to avoid overlapping animations. This fits cleanly into ’s existing createMarker routine by storing new markers in markersById rather than clearing them each cycle — and answers ’s request for a smoother approach.

Member Avatar for pritaeas

Care to share your solution?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.