How to move animated marker smoothly using Google Map Javascript API

Pradeep Maurya

7 years ago

In this article, you will learn about how to create moving Google map marker smoothly using Google maps JavaScript API. You can easily display maps on the website using Google Maps API and point the location using marker on map and show the html/text on info popup window.

You can implement Google map functionality in various way on the web page as per your requirement. If you need to extend Google Map functionality and the animated marker feature than you can do it easily in a user friendly way. Now, we will show you how to move google map location marker smoothly on google map using Google Maps JavaScript API.

In this below example script, you will see a map with a location marker using Google Maps JavaScript API. On clinking on the Google Map different location the marker moves smoothly and changed marker position.

Google Maps API is used to generate google map, so load the JavaScript API First under your <head></head> tags. You need to change API Key in API URL for using the Google Maps JavaScript API.



<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

If you don’t know, How you will get Google Maps JavaScript API Key. Please follow our step by step instruction to get your own API key:- How to create Google Maps JavaScript API Key.

You need to copy and paste below JavaScript Code under <head> or under <body> tags.



<script>
var position = [28.4594965, 77.0266383];

function initialize() { 
    var latlng = new google.maps.LatLng(position[0], position[1]);
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);

    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "Latitude:"+position[0]+" | Longitude:"+position[1]
    });

    google.maps.event.addListener(map, 'click', function(event) {
        var result = [event.latLng.lat(), event.latLng.lng()];
        transition(result);
    });
}

//Load google map
google.maps.event.addDomListener(window, 'load', initialize);


var numDeltas = 100;
var delay = 10; //milliseconds
var i = 0;
var deltaLat;
var deltaLng;

function transition(result){
    i = 0;
    deltaLat = (result[0] - position[0])/numDeltas;
    deltaLng = (result[1] - position[1])/numDeltas;
    moveMarker();
}

function moveMarker(){
    position[0] += deltaLat;
    position[1] += deltaLng;
    var latlng = new google.maps.LatLng(position[0], position[1]);
    marker.setTitle("Latitude:"+position[0]+" | Longitude:"+position[1]);
    marker.setPosition(latlng);
    if(i!=numDeltas){
        i++;
        setTimeout(moveMarker, delay);
    }
}
</script>

var position = [28.4594965, 77.0266383];

function initialize() {

var latlng = new google.maps.LatLng(position[0], position[1]);

var myOptions = {

zoom: 16,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

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

marker = new google.maps.Marker({

position: latlng,

map: map,

title: "Latitude:"+position[0]+" | Longitude:"+position[1]

});

google.maps.event.addListener(map, 'click', function(event) {

var result = [event.latLng.lat(), event.latLng.lng()];

transition(result);

});

}

//Load google map

google.maps.event.addDomListener(window, 'load', initialize);

var numDeltas = 100;

var delay = 10; //milliseconds

var i = 0;

var deltaLat;

var deltaLng;

function transition(result){

i = 0;

deltaLat = (result[0] - position[0])/numDeltas;

deltaLng = (result[1] - position[1])/numDeltas;

moveMarker();

}

function moveMarker(){

position[0] += deltaLat;

position[1] += deltaLng;

var latlng = new google.maps.LatLng(position[0], position[1]);

marker.setTitle("Latitude:"+position[0]+" | Longitude:"+position[1]);

marker.setPosition(latlng);

if(i!=numDeltas){

i++;

setTimeout(moveMarker, delay);

}

</script>

initialize() function creates a google Map with location Marker. transition() & moveMarker() are used to move location marker smoothly on Google Map.

HTML Code:



<div id="mapCanvas"></div>

The above HTML code define the Google Map display area. The selector ID (mapCanvas) need to be specified in the initialize() function.



#mapCanvas{
width:100%;
height:500px;
}

#mapCanvas{

width:100%;

height:500px;

}

The above CSS Code is used to define Google Map width and height. You need to put under <head> tags.

Google Map animated marker Complete Code:



<html>
<head>
<title>How to move animated marker smoothly using Google Map Javascript API- Tutorialswebsite
</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
var position = [28.4594965, 77.0266383];

function initialize() { 
    var latlng = new google.maps.LatLng(position[0], position[1]);
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);

    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "Latitude:"+position[0]+" | Longitude:"+position[1]
    });

    google.maps.event.addListener(map, 'click', function(event) {
        var result = [event.latLng.lat(), event.latLng.lng()];
        transition(result);
    });
}

//Load google map
google.maps.event.addDomListener(window, 'load', initialize);


var numDeltas = 100;
var delay = 10; //milliseconds
var i = 0;
var deltaLat;
var deltaLng;

function transition(result){
    i = 0;
    deltaLat = (result[0] - position[0])/numDeltas;
    deltaLng = (result[1] - position[1])/numDeltas;
    moveMarker();
}

function moveMarker(){
    position[0] += deltaLat;
    position[1] += deltaLng;
    var latlng = new google.maps.LatLng(position[0], position[1]);
    marker.setTitle("Latitude:"+position[0]+" | Longitude:"+position[1]);
    marker.setPosition(latlng);
    if(i!=numDeltas){
        i++;
        setTimeout(moveMarker, delay);
    }
}
</script>
<style>
#mapCanvas{
    width: 100%;
    height: 400px;
}
</style>
</head>
<body>
<div id="mapCanvas"></div>
</body>

</html>

<html>

<head>

<title>How to move animated marker smoothly using Google Map Javascript API- Tutorialswebsite

</title>

var position = [28.4594965, 77.0266383];

function initialize() {

var latlng = new google.maps.LatLng(position[0], position[1]);

var myOptions = {

zoom: 16,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

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

marker = new google.maps.Marker({

position: latlng,

map: map,

title: "Latitude:"+position[0]+" | Longitude:"+position[1]

});

google.maps.event.addListener(map, 'click', function(event) {

var result = [event.latLng.lat(), event.latLng.lng()];

transition(result);

});

}

//Load google map

google.maps.event.addDomListener(window, 'load', initialize);

var numDeltas = 100;

var delay = 10; //milliseconds

var i = 0;

var deltaLat;

var deltaLng;

function transition(result){

i = 0;

deltaLat = (result[0] - position[0])/numDeltas;

deltaLng = (result[1] - position[1])/numDeltas;

moveMarker();

}

function moveMarker(){

position[0] += deltaLat;

position[1] += deltaLng;

var latlng = new google.maps.LatLng(position[0], position[1]);

marker.setTitle("Latitude:"+position[0]+" | Longitude:"+position[1]);

marker.setPosition(latlng);

if(i!=numDeltas){

i++;

setTimeout(moveMarker, delay);

}

</script>

<style>

#mapCanvas{

width: 100%;

height: 400px;

}

</style>

</head>

<body>

</body>

</html>

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co