- 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
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'] = " &lt;h1&gt;{$arr['CALLSIGN']} ($status)&lt;/h1&gt; "; $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'].'&amp;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 &lt; 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: ' &lt;div class="detail"&gt;'+detail+'&lt;/div&gt; ' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); return marker; }