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:
<!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:
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:
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) {
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++;
infowindow.setContent('The marker number is : ' + c);
infowindow.open(map, marker);
if (c > arrayOfTrackingPoints.length) clearInterval(interval);
}, 5000);
}
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 24th March, 2015. Hope to add some beauty to it. For a working sample, click here.
- Updated on 12th April 2016. The view is better and more real now, hoping for more advancements in the future.
