Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

API V3 Update marker position dynamically

I have this code that reads data from an xml file and puts the marker on the map.

What i want to do is to read the xml file automatically every 5 seconds, and so update the position of the marker.

I tried adding setInterval to the function, but the problem is that the previous marker is not deleted. Just add another marker to the map and so on.

(I dont want the entire map updated, just the marker)

<script type="text/javascript"> 


var map = null;



function createMarker(latlng, html) {
var contentString = html;

var image = new google.maps.MarkerImage('http://www.google.com/mapfiles/markerA.png',
new google.maps.Size(20, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));

var shadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));

var marker = new google.maps.Marker({
position: latlng,
map: map,
shadow: shadow,
icon: image,
zIndex: Math.round(latlng.lat()*-100000)<<5


});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString); 
infowindow.open(map,marker);

});

}




function initialize() {

var myOptions = {
zoom: 13,
center: new google.maps.LatLng(-18.432713,-70.317993),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);



google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});



setInterval(function() { 
downloadUrl("data.xml", function(doc) {

var xmlDoc = xmlParse(doc);

var markers = xmlDoc.documentElement.getElementsByTagName("marker");

for (var i = 0; i < markers.length; i++) {

var lat = parseFloat(markers[i].getAttribute("lat"));

var lng = parseFloat(markers[i].getAttribute("lng"));

var point = new google.maps.LatLng(lat,lng);

var html = "<strong>Taxi Arica</strong></br><strong>Latitud:</strong> " +       markers[i].getAttribute("lat") + "</br><strong>Longitud:</strong> " +  markers[i].getAttribute("lng");

var marker = createMarker(point,html);

}

});

},5000);


}



var infowindow = new google.maps.InfoWindow(
{size: new google.maps.Size(150,50)});


</script> 
like image 941
francis Avatar asked Jan 12 '12 19:01

francis


1 Answers

To update the position of a marker, you should call setPosition:

   var new_marker_position = new google.maps.LatLng(53.345735, -6.259548);

   marker.setPosition(new_marker_position);
like image 123
eamo Avatar answered Nov 07 '22 21:11

eamo