Create animated direction with Google Map

Jiradett  Kerdsri

2 min read3 days ago

I’m planning to incorporate animated direction into my camping YouTube channel, and here’s what I’ve done so far:

First you’ll need Google Maps API Key in which you can get by

Step 1: Sign in to Google Cloud Console

Go to the Google Cloud Console.
If you don’t have an account, you’ll need to create one.

Step 2: Create a Project

From the dashboard, click the dropdown at the top next to “Google Cloud Platform”.
Select “New Project”.
Name your project (e.g., “My Maps Project”) and click “Create”.

Step 3: Enable the Maps API

In the Navigation Menu, go to APIs & Services > Library.
Search for the “Maps JavaScript API”.
Click “Enable”.

Step 4: Create Credentials (API Key)

Go to APIs & Services > Credentials.
Click “Create Credentials” > “API Key”.
The generated API key will be shown in a dialog box. Copy it.

After obtaining the Key, you can replace the key in this sample code and input your preferred starting and ending locations.

        var start = { lat:-37.71334955125689, lng: 144.99486937819995 }; // Start
        var end = { lat: -37.27341616722014, lng: 145.97178485126707 };   // Destination

Here is the sample code:

<!DOCTYPE html>
<html>
  <head>
    <title>Animated Google Maps</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=<your_API_key>" async defer></script>
    <style>
      #map {
        height: 100%;
        width: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        // Define the start and end coordinates
        var start = { lat:-37.71334955125689, lng: 144.99486937819995 }; // Start
        var end = { lat: -37.27341616722014, lng: 145.97178485126707 };   // Destination

        // Calculate the midpoint
        var center = {
          lat: (start.lat + end.lat) / 2,
          lng: (start.lng + end.lng) / 2
        };

        var map = new google.maps.Map(document.getElementById('map'), {
          center: center,
          zoom: 13,
          mapTypeId: 'terrain'
        });

        var lineSymbol = {
          path: google.maps.SymbolPath.CIRCLE,
          fillOpacity: 1,
          scale: 3
        };

        var myMarker = {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 5,
          strokeColor: '#e53935'
        };

        var directionsService = new google.maps.DirectionsService();

        var method = 'DRIVING';
        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode[method]
        };

        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            var line = new google.maps.Polyline({
              path: response.routes[0].overview_path,
              icons: [{
                icon: lineSymbol,
                offset: '0',
                repeat: '10px'
              }, {
                icon: myMarker,
                offset: '100%'
              }],
              strokeColor: '#0eb7f6',
              map: map
            });

            animateCircle(line);

            var markerStart = new google.maps.Marker({
              position: response.routes[0].overview_path[0],
              map: map,
              title: 'Start'
            });
            var markerEnd = new google.maps.Marker({
              position: response.routes[0].overview_path[response.routes[0].overview_path.length - 1],
              map: map,
              title: 'End'
            });
          }
        });
      }

      function animateCircle(line) {
        var count = 0;
        window.setInterval(function() {
          count = (count + 1) % 200;
          var icons = line.get('icons');
          icons[1].offset = (count / 2) + '%';
          line.set('icons', icons);
        }, 100);
      }
    </script>
  </body>
</html>

Create animated direction with Google Map

Written by Jiradett  Kerdsri

No responses yet