Java Script – Animation of a line in Google Maps

Posted on April 27, 2014 by

Some time ago I have started to read an outstanding book for the Google API. Currently, I have read only 40% of it, but still there are some really interesting pieces of code, which I want to present in my blog. Here is the book:

In the current article I will show you how to make an animated line with the help of the google API. The code is mainly from the book, I have just changed a few lines to adjust it to the cities, which I wanted to draw a line between in and to make the map bigger. Here, you may find the result of the code(click on the picture to enlarge and see the arrow moving):

Here you may check the animation by yourself!

So, enough said, let’s take a quick look into the code!

The most important part, if you want to make such application are the line Coordinates! In my case these are the following:

        var lineCoordinates = [
           [44.0715858,27.2454436],[43.83531,25.9752809],
		   [43.0840727,25.6331224],[42.6954322,23.3239467],
		   [52.3747157,4.8986167],[51.2384547,6.8143503]
        ];

var lineCoordinates = [

[44.0715858,27.2454436],[43.83531,25.9752809],

[43.0840727,25.6331224],[42.6954322,23.3239467],

[52.3747157,4.8986167],[51.2384547,6.8143503]

];

How do you obtain the line coordinates? My method was actually the following – ib Google maps I wrote ” Sofia” for and it gave me something like this in the URL:

The coordinates of Sofia are highlighted in the link, separated with commas. 12z stands for 12 zoom.

The second thing, which you should take care of is the initial zoom and focus of the map. It is really not a good idea to animate something in Bulgaria and to have a detailed focus over South America. Thus, this is achieved with the following lines:

            var mapOptions = {
                center: new google.maps.LatLng(47.5550609,18.5756966),
                zoom: 6,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

var mapOptions = {

center: new google.maps.LatLng(47.5550609,18.5756966),

zoom: 6,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

In the aforementioned code, I define the focus (47…,18) the zoom (6) and the type of the map – RoadMap.

Last, but not least, if you are using Google Maps API, you should make your own account in code.google.com to get your own API Key. This is needed, because there are limits for the free usage of google. The limits are quite high (something like 20 K), but still, it is better to use your own! The API key is put here:

 <script 
    src="https://maps.googleapis.com/maps/api/js?key=PUT_THE_KEY_HERE&sensor=false">
 </script>

<script

src="https://maps.googleapis.com/maps/api/js?key=PUT_THE_KEY_HERE&sensor=false">

</script>

So far so good.

At the end, here comes the whole working code (just put your own API key) which is really something interesting!

Enjoy it:

<!DOCTYPE html>
<html>
<head>
    <script 
            src="https://maps.googleapis.com/maps/api/js?key=PUT_THE_KEY_HERE&sensor=false">
    </script>
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 5; }
        #mapDiv { width: 100%; height: 100%; }
    </style>
    <!-- Map creation is here -->
    <script>
        //Defining map as a global variable to access from other functions
        var map;
        var polyline;

        var lineCoordinates = [
           [44.0715858,27.2454436],[43.83531,25.9752809],
		   [43.0840727,25.6331224],[42.6954322,23.3239467],
		   [52.3747157,4.8986167],[51.2384547,6.8143503]
        ];

        function addAnimatedPolyline () {
            //First we iterate over the coordinates array to create a
            // new array which includes objects of LatLng class.
            var pointCount = lineCoordinates.length;
            var linePath = [];
            for (var i=0; i < pointCount; i++) {
                var tempLatLng = new google.maps.LatLng(lineCoordinates[i][0], lineCoordinates[i][1]);
                linePath.push(tempLatLng);
            }

            // Defining arrow symbol
            var arrowSymbol = {
                strokeColor: '#070',
                scale: 3,
                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
            };

            // Polyline properties are defined below
            var lineOptions = {
                path: linePath,
                icons: [{
                    icon: arrowSymbol
                    //offset: '100%'
                }],
                strokeWeight: 3,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8
            }
            polyline = new google.maps.Polyline(lineOptions);

            // Polyline is set to current map
            polyline.setMap(map);

            // Calling the arrow animation function
            animateArrow();
        }

        function animateArrow() {
            var counter = 0;
            var accessVar = window.setInterval(function() {
                counter = (counter + 1) % 350;

                var arrows = polyline.get('icons');
                arrows[0].offset = (counter / 2) + '%';
                polyline.set('icons', arrows);
            }, 50);
        }

        function initMap() {
            //Enabling new cartography and themes
            google.maps.visualRefresh = true;

            //Setting starting options of map
            var mapOptions = {
                center: new google.maps.LatLng(47.5550609,18.5756966),
                zoom: 6,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            //Getting map DOM element
            var mapElement = document.getElementById('mapDiv');

            //Creating a map with DOM element which is just obtained
            map = new google.maps.Map(mapElement, mapOptions);

            addAnimatedPolyline();
        }

        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
</head>
<body>
    <b>VitoshAcademy.com</b><br/>
	<b>Travelling from Silistra > Ruse > Veliko Tarnovo > Sofia > Netherlands</b><br/>
    <div id="mapDiv"></div>
</body>
</html>

100

<!DOCTYPE html>

<html>

<head>

<script

src="https://maps.googleapis.com/maps/api/js?key=PUT_THE_KEY_HERE&sensor=false">

</script>

html { height: 100% }

body { height: 100%; margin: 5; }

#mapDiv { width: 100%; height: 100%; }

</style>

//Defining map as a global variable to access from other functions

var map;

var polyline;

var lineCoordinates = [

[44.0715858,27.2454436],[43.83531,25.9752809],

[43.0840727,25.6331224],[42.6954322,23.3239467],

[52.3747157,4.8986167],[51.2384547,6.8143503]

];

function addAnimatedPolyline () {

//First we iterate over the coordinates array to create a

// new array which includes objects of LatLng class.

var pointCount = lineCoordinates.length;

var linePath = [];

for (var i=0; i < pointCount; i++) {

var tempLatLng = new google.maps.LatLng(lineCoordinates[i][0], lineCoordinates[i][1]);

linePath.push(tempLatLng);

}

// Defining arrow symbol

var arrowSymbol = {

strokeColor: '#070',

scale: 3,

path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW

};

// Polyline properties are defined below

var lineOptions = {

path: linePath,

icons: [{

icon: arrowSymbol

//offset: '100%'

}],

strokeWeight: 3,

strokeColor: '#FF0000',

strokeOpacity: 0.8

}

polyline = new google.maps.Polyline(lineOptions);

// Polyline is set to current map

polyline.setMap(map);

// Calling the arrow animation function

animateArrow();

}

function animateArrow() {

var counter = 0;

var accessVar = window.setInterval(function() {

counter = (counter + 1) % 350;

var arrows = polyline.get('icons');

arrows[0].offset = (counter / 2) + '%';

polyline.set('icons', arrows);

}, 50);

}

function initMap() {

//Enabling new cartography and themes

google.maps.visualRefresh = true;

//Setting starting options of map

var mapOptions = {

center: new google.maps.LatLng(47.5550609,18.5756966),

zoom: 6,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

//Getting map DOM element

var mapElement = document.getElementById('mapDiv');

//Creating a map with DOM element which is just obtained

map = new google.maps.Map(mapElement, mapOptions);

addAnimatedPolyline();

}

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

</script>

</head>

<body>

<b>VitoshAcademy.com</b><br/>

<b>Travelling from Silistra > Ruse > Veliko Tarnovo > Sofia > Netherlands</b><br/>

</body>

</html>

That’s all, folks! 🙂

Tagged with: Animation of a line, Book Review, how to animate a line in google maps, Java Script

Java Script – Animation of a line in Google Maps

Related posts: