Show vehicle positions with the Google Maps v3 API

by
Most people are already familiar with Google Maps, so why not utilise that to present your business data to your users. Today I am going to show you how to use the Google Maps API to track vehicles using their AVL data. This is something I have done for the Fire Service to show the location of Fire Engines across the county.
For this we are going to need the following:
  • JQuery
  • The Google Maps JavaScript API
  • A page that displays the google map
  • Some JavaScript to pull the vehicle locations
  • A PHP Script to serve the vehicle locations
  • A way to generate dynamic icons
To start with we will need a simple page that will include the required JavaScript, StyleSheets and HTML code to provide a placeholder for the Google Map.
The div with an ID of mapcanvas will hold the google map and the JavaScript code will populate this div with content.
Next we need to display the google map by calling the Google Maps API.
var latlng = new google.maps.LatLng(52.64, 0.95);
var myOptions = {
zoom: 10,
streetViewControl: true,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
navigationControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
map = new google.maps.Map(document.getElementById("mapcanvas"),
myOptions);</pre>

This starts by creating a Latitude and Longitude point (52.64, 0.95 is in the middle of Norfolk). I then set the default features of the map such as Zoom Level and what controls I want to have displayed. I have positioned the controls to the top right of the map as in my application I overlay the top left with a application specific menu. Finally the mapcanvas div is referenced as the container for the new map and a map of Norfolk appears in the div.

Where is everyone

The location of the vehicles is obtained by a calling a webpage that returns the current position of each vehicle. The code is fairly straight forward, starting by preventing caching of the page data.

header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("cache-control: no-store, no-cache, must-revalidate");
header("Pragma: no-cache");</pre>
<div>Then we connect to the database</div>
<pre class="lang:php decode:true">$db = odbc_connect('Database', 'Username', 'Password');
$res = odbc_exec($db, 'SELECT CALLSIGN, X, Y, STATUS FROM VEHICLE_RESOURCES;');</pre>
And loop through the results creating an array with each element holding an ID (based on the vehicle callsign here), a name, detail for the pop up balloon and the latitude and longitude co-ordinates.
<pre class="lang:php decode:true">while($arr = odbc_fetch_array($res)) {
$return[$i]['id'] = $arr['CALLSIGN'];
$status = $arr['STATUS'];
$return[$i]['name'] = "{$arr['CALLSIGN']} ($status)";
$return[$i]['detail'] = "
<h1>{$arr['CALLSIGN']} ($status)</h1>
";
$return[$i]['detail'] .= '
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus purus, placerat a tincidunt ut, suscipit at elit. Nulla facilisi.

';
$return[$i]['lat'] = $arr['X'];
$return[$i]['lng'] = $arr['Y'];
$return[$i]['icon'] = 'icon.php?text='.$arr['CALLSIGN'].'&status='.$arr['STATUS'];
$i++;
}

And finally display the array in a JSON encoded format.

echo json_encode(resources());

Initially Google will display the default pin, but for my application I wanted to use the marker graphic to display the callsign and the status of the vehicle using different colours. The icons are generated automatically by a PHP script – see Generating Dynamic Icons with PHP
There they are

The updateMarkers function makes the Ajax call to this location PHP page and loops through the results using an array called callsigns to store each marker. When this function is called again the marker position is simply updated.

function updateMarkers() {
var mcOptions = {gridSize: 30, maxZoom: 15};
var mcmarkers = [];
$.getJSON("http://127.0.0.1/livexml.php",
function(data) {
for (var i = 0; i < data.length; i++) {
var id = data[i]['id'];
var name = data[i]['name'];
var detail = data[i]['detail'];
var icon = data[i]['icon'];
var point = new google.maps.LatLng(
parseFloat(data[i]['lat']),
parseFloat(data[i]['lng'])
);
var existing = callsigns[id];
if (existing == undefined) {
var marker = createMarker(point, name, icon, detail);
mcmarkers.push(marker);
callsigns[id] = marker;
} else {
callsigns[id].setPosition(point);
}
}
setTimeout(function() {updateMarkers()}, 10000);
});
}</php>
<div>The createMarker function is a simple wrapper for creating a Google marker. It starts by creating a marker on the map based on the location and name, then a info window is created and this is made to open when the marker is clicked on through the use of the addListener function for the click event.</div>
function createMarker(point, name, icon, detail) {
var marker = new google.maps.Marker({
position: point,
title: name,

map: map
});

var infowindow = new google.maps.InfoWindow({
content: '
<div class="detail">'+detail+'</div>
'
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

return marker;
}

Summary

Google Maps can be a valuable addition to your business applications, data can be more meaningful when plotted on a map instead of a pie chart. When considering using Google Maps for your business applications you should check the licensing terms. At the time of writing if your application is not publically accessible or requires a login then you need a commercial licence which can be several thousand pounds a year.

References