Simple Map
HTML
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
CSS
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
JavaScript
var map;
function initMap() {
let data = [
["2019-06-28T07:33:03", 37.610225, 55.651365],
["2019-06-28T07:33:40", 37.6107283333333, 55.6511716666667],
["2019-06-28T07:33:46", 37.610745,55.6510383333333],
["2019-06-28T07:33:47",37.610785,55.6510233333333],
["2019-06-28T07:33:48",37.61083,55.65103]
];
//start position
const startPosition ={lat:data[0][2],lng:data[0][1]}
let map = new google.maps.Map(document.getElementById("map"), {
zoom: 18,
center: {lat: 55.651365, lng: 37.610225},
});
const pathCoordinate = [];
data.forEach(path => {
pathCoordinate.push({
lat: path[2],
lng: path[1]
});
});
// draw the path
const principePath = new google.maps.Polyline({
path: pathCoordinate,
geodesic: true,
strokeColor: "#2A7884",
strokeOpacity: 1.0,
strokeWeight: 3
});
principePath.setMap(map);
//Create a Marker and set position on your first value of the array
var marker = new google.maps.Marker({
position: pathCoordinate[0],
map: map,
title: 'Hello World!'
});
//Call the function that move the Marker passing the marker and pathCoordinate
moveMarker(marker, pathCoordinate);
}
function moveMarker(marker, pathCoordinate){
//Get the length of your array
var len = pathCoordinate.length
var i;
//let i start on the second value of array(which is index 1) since it will be the next point
for (i = 1; i < len; i++) {
//log the current coordinate
console.log(pathCoordinate[i]);
//create a function where you set interval when you change the position of the marker in the array
(function(i){
setTimeout(function(){
marker.setPosition(pathCoordinate[i]);
}, 1000 * i);
}(i));
}
}