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="http://maps.google.com/maps/api/js?sensor=false"></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>
