Tracking of Markers Over A Route Via Google Maps API

Shivi Gupta Lucknow

Rate me:

5.00/5 (2 votes)

12 Apr 2016CPOL1 min read

22.1K

To showcase the tracking by placing markers on a route displayed by directions service of the Google maps API every 5 seconds

Introduction

The following code will help place markers on a route, which can be used in projects showcasing vehicle tracking using the Google maps API.

Background

Before getting the hang of this code, the reader should be aware of basic JavaScript methods and experience on Google maps API. (Read the documentation here.)

Using the Code

I shall put the entire HTML code here, so it is easier for readers to see the working of a truly majestic performance of the Google maps. Follow the HTML here:

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

</head>
<body onload="initialize();">
<div id="control">
      <strong>Start:</strong>
      <select id="start" onchange="calcRoute();">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
      </select>
      <strong>End:</strong>
      <select id="end" onchange="calcRoute();">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
      </select>
    </div>
    <div id="directions-panel"></div>
    <div id="map-canvas"></div>
  </body>

</body>
</html>

and the CSS as:

CSS

html, body, #map-canvas {
        height: 1000px;
        margin: 0px;
        padding: 0px;
  width:500px;
         
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <style>
      #directions-panel {
        height: 100px;
        float: right;
        width: 390px;
        overflow: auto;
      }

      #map-canvas {
        margin-right: 400px;
      }

      #control {
        background: #fff;
        padding: 5px;
        font-size: 14px;
        font-family: Arial;
        border: 1px solid #ccc;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
      }

      @media print {
        #map-canvas {
          height: 500px;
          margin: 0;
        }

        #directions-panel {
          float: none;
          width: auto;
        }
      }

And hence, we follow the most significant JavaScript:

JavaScript

var directionsDisplay;
        var directionsService ;
        var map;

        function initialize() {
            directionsService = new google.maps.DirectionsService();
            directionsDisplay = new google.maps.DirectionsRenderer();
            var mapOptions = {
                zoom: 7,
                center: new google.maps.LatLng(41.850033, -87.6500523)
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
               mapOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('directions-panel'));

            var control = document.getElementById('control');
            control.style.display = 'block';
            map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
        }
        var arrayOfTrackingPoints = [];
        function calcRoute() {
            var start = document.getElementById('start').value;
            var end = document.getElementById('end').value;
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    for (var i = 0; i < response.routes[0].overview_path.length; ++i) {
                        /*  marker = new google.maps.Marker({
                              map: map,
                              position: new google.maps.LatLng
                              (response.routes[0].overview_path[i].lat(), 
                              response.routes[0].overview_path[i].lng()),
                              animation: google.maps.Animation.BOUNCE
                          });*/
                        arrayOfTrackingPoints.push(new google.maps.LatLng
                        (response.routes[0].overview_path[i].lat(), 
                        response.routes[0].overview_path[i].lng()));
                    }
                }
            });
            showTracking();
        }
        var markerArray = [];
        var infowindow = new google.maps.InfoWindow();
        function showTracking() {
            var marker = new google.maps.Marker({
                map: map,
                position: arrayOfTrackingPoints[0]

            });
            var c = 0;
            var interval = self.setInterval(function () {

                marker.setPosition((arrayOfTrackingPoints[c]));
                c++;
              //  markerArray.push(marker);
               infowindow.setContent('The marker number is : ' + c);
             infowindow.open(map, marker);
                if (c > arrayOfTrackingPoints.length) clearInterval(interval);
            }, 5000);


            ////window.setInterval(clearOverlays, 9500);
            //var counterForClearing = 0;
            //var clearMarkersInterval = self.setInterval(function () {
            //    for (var j = 0; j < markerArray.length; ++j) {
            //        markerArray[j].setMap(null);
            //    }
            //    counterForClearing++;
            //    if (counterForClearing > markerArray.length) clearInterval(clearMarkersInterval);
            //}, 9500);
        }

That concludes the code, you can modify the JavaScript for custom markers and content in the infowindow and also the delay time of the markers.

Now the marker will not disappear and appear at regular intervals but it will show displacement, a realistic way of viewing or tracking a vehicle. Updated version of the working sample is here.

Points of Interest

Using the setInterval method helps rather than using a setTimeout in a for loop, so this way is easier to comprehend and implement.

History

First post as of 24^th March, 2015. Hope to add some beauty to it. For a working sample, click here.
Updated on 12^th April 2016. The view is better and more real now, hoping for more advancements in the future.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Shivi Gupta Lucknow

Software Developer

India

Shivi is currently working as Software Engineer in Mumbai, India, gaining expertise in asp.net, c#,vb,swift,java,vb.net,SQL Server,MVC, Azure,Google Maps API,Angular,Resharper,Winforms,python, data science, AWS and also has proficiency in web designing, using html, css3 and javascript/jquery,mongodb and java.
Shivi has developed a heavy interest in AI and machine learning.
Shivi has an android app on the play store:
https://play.google.com/store/apps/details?id=hungrybaba.quoter
The same quoter app on the app store:
https://apps.apple.com/in/app/quotertwo/id1476920917

Apart from coding, Shivi covets food and music from all parts of the world.
Arsenal FC is his favorite team.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.