Animating Symbols

by Posandu Mapa

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Animating Symbols</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=&v=weekly"
      async
    ></script>
  </body>
</html>

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

// This example adds an animated symbol to a polyline.
function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        center: {
            lat: 7.284888885073454, 
            lng: 80.5140470338562,
        },
        zoom: 10,
        mapTypeId: "terrain",
    });
    // Define the symbol, using one of the predefined paths ('CIRCLE')
    // supplied by the Google Maps JavaScript API.
    const lineSymbol = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 8,
        strokeColor: "#393",
    };
    // Create the polyline and add the symbol to it via the 'icons' property.
    const line = new google.maps.Polyline({
        path: [
            {
                lat: 7.264717165604568,
                lng: 80.57682303980202,
            },
            {
                lat: 7.333137333271175265061,
                lng: 80.50002444164869,
            },
        ],
        icons: [
            {
                icon: lineSymbol,
                offset: "100%",
            },
        ],
        map: map,
    });
    animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
       line.set("icons", 50);
}