MAP to pass the latitude & longitude and moving marker

Question

Hi all, By using Javascript,ajax,. I need the to change the map marker(tracking) based on API response (data latitude & longitude),kindly share if any code.. Thanks by advance..

Sreekanth Reddy · Answer

Hi Karthika, function LocateMarkerOnMap(latitude , longitude) { function initialize() { var latlng = new google.maps.LatLng(latitude, longitude); var myOptions = { zoom: 1, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } } LocateMarkerOnMap(40.77627 , -73.910965); If it helps, mark as answer. Thank you.

Divyang Desai · Answer

Hi Karthika, There are differant ways to achieve it, one way is update your maker postion on map with an ajax and pass updated lat/long to the map and create animation on your marker which create a feel of moving. Referance: http://jsfiddle.net/pmrotule/9tfq5sqc/8/

karthika pommudu · Answer

Here ,I set the time interval for this script but its not working.Find my mistake & help to trieve Thanks by advance --------------------------------------------------------------------------------------------- var src_city1 = document.getElementById("src_city1").value; var src_city2 = document.getElementById("src_city").value; var map, marker; var startPos = [src_city1,src_city2]; var speed = 50; // km/h var delay = 100; function animateMarker(marker, coords, km_h) { var target = 0; var km_h = km_h || 50; coords.push([startPos[0], startPos[1]]); var spherical; var computeDistanceBetween; function goToPoint() { var lat = marker.position.lat(); var lng = marker.position.lng(); var step = (km_h * 1000 * delay) / 3600000; var dest = new google.maps.LatLng( coords[target][0], coords[target][1]); var distance = google.maps.geometry.spherical.computeDistanceBetween(dest, marker.position); var numStep = distance / step; var i = 0; var deltaLat = (coords[target][0] - lat) / numStep; var deltaLng = (coords[target][1] - lng) / numStep; function moveMarker() { lat += deltaLat; lng += deltaLng; i += step; if (i { marker.setPosition(new google.maps.LatLng(lat, lng)); setTimeout(moveMarker, delay); } else { marker.setPosition(dest); target++; if (target == coords.length){ target = 0; } setTimeout(goToPoint, delay); } } moveMarker(); } goToPoint(); } function initialize() { var myOptions = { zoom: 16, center: new google.maps.LatLng(src_city1,src_city2), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("dvMap"), myOptions); var icon = "Markers/letter_m.png"; marker = new google.maps.Marker({ position: new google.maps.LatLng(startPos[0], startPos[1]), map: map, icon:icon }); google.maps.event.addListenerOnce(map, 'idle', function() { setInterval(marker, [ [startPos] ], 5000); }); } initialize();

karthika pommudu · Answer

Thank you for both I will check this.