Using Google Maps API to Show Multiple Animated Markers

Adding Markers on Google maps can show a location more prominently. A marker is generally an icon displayed right above the location on the map and bound using the Latitude and Longitude coordinates.

By default Google, maps show popular cities or locations by their names at a certain zoom level, but it becomes difficult to find the exact location of not so popular cities.

See this demo

Markers can help users navigate or scroll closest to these locations without wasting any time. In addition, we can add multiple markers for marking multiple locations.

Syntax

var marker = new google.maps.Marker();

Google have designed these Markers to be interactive and customizable. You can drag the markers, add custom icons as markers, and animate the markers.

Here is an example where we will add animated Markers on a map, which will show three different cities in India using their latitudes and longitudes.

The Markup

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Show Multiple Markers on Google Maps</title> 
    
    <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
</head>

<body>
  <div id="mapContainer" style="width:750px;height:380px;"></div>
</body>

<script>
    // DATA SHOWING CITIES, LATITUDE & LOGITUDE AND Z-INDEX TO SHOW MARKERS.
    var info_cities = [
        ['Bangalore', 12.9362637, 77.6624468, 1],
        ['Hyderabad', 17.4123487, 78.4080455, 2],
        ['Pune', 18.5246164, 73.8629674, 3]
    ];

    function initialize() {
        // MAP ATTRIBUTES.
        var mapAttr = {
            center: new google.maps.LatLng(17.4123487, 78.4080455),     // DEFAULT LOCATION ON PAGE LOAD.
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // THE MAP TO DISPLAY.
        var map = new google.maps.Map(document.getElementById("mapContainer"), mapAttr);

        var marker, iCnt;

        for (iCnt = 0; iCnt < info_cities.length; iCnt++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(info_cities[iCnt][1], info_cities[iCnt][2]),
                map: map,
                animation: google.maps.Animation.DROP,          // SHOW MARKERS AS DROPING (ANIMATED).
                title: info_cities[iCnt][0]                     // SHOW TITLE ON MOUSE OVER MARKERS.
            });
        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>

Try it

After initializing the Map properties, we need to add the Marker constructor, which will create the Marker. This constructor takes few more properties.

Position

To display the Marker, the position property has to be set, which translates the exact location where the Marker will be visible. The “position” property is similar to the “center” property and the LatLng() function gets the data from an array initialized at the beginning.

Map

The map on which the Markers have to be placed.

Animation

Like we in this article, our location Markers will be animated. This is an optional property but useful when multiple Markers are to be displayed. You can Drop it or even Bounce it. We are dropping it, so you can try using the BOUNCE option too.

Syntax

animation:google.maps.Animation.BOUNCE

Title

Also we have added another property to finish with and it is the "title" property. Titles can help identify the Markers when the mouse moves over it. Let us assume we have multiple Markers on the map and Google is not displaying the names of the locations, which are marked. If we add titles (with location names and address) to these Markers, users can move their mouse over the Markers and it will display the titles.

See this demo

← PreviousNext →