Location Tracking with Google Maps
Our quick example only makes sense if used on mobile devices. Of course, you can get things moving artificially for demo purposes, but you will most likely only get a real sense of achievement once you manage to determine your location accurately via GPS and using a browser while on the move. A crucial component of the following experiment was an Android smartphone showing the HTML page during a trip down the highway.
As you can see in the image, the last five locations determined on Google Maps are marked on the map. As soon as the user leaves the map area represented on the screen, the map is centered around the next point.
Calling the Geolocation API is once again done in window.onload and looks like this:
var watchID = navigator.geolocation.watchPosition( <br>
moveMe, posError, {enableHighAccuracy: true} <br>
);<br>
The real work takes place in the function moveMe():<br>
function moveMe(position) { <br>
latlng = new google.maps.LatLng( <br>
position.coords.latitude, <br>
position.coords.longitude); <br>
bounds = map.getBounds(); <br>
map.setZoom(16); <br>
if (!bounds.contains(latlng)) { <br>
map.setCenter(latlng); <br>
} <br>
if (marker.length >= maxMarkers) { <br>
m = marker.shift(); <br>
if (m) { <br>
m.setMap(); <br>
} <br>
} <br>
marker.push(new google.maps.Marker({ <br>
position: latlng, map: map, <br>
title: position.coords.accuracy+"m lat: " <br>
+position.coords.latitude+" lon: "+ <br>
position.coords.longitude <br>
})); <br>
}
The variable latlng is created as a LatLng object from the Google Maps API, and the current coordinates are passed to this object. If the current location is outside of the represented area (!bounds.contains(latlng)), the map is re-centered over the current point. Both the array marker and the variable maxMarkers at the beginning of the script are defined as global and assigned the value 5. If the array marker contains more than five elements, the first element is removed from the array with the shift function and then deleted from the map by calling setMap() without any further parameters. Finally, a new object of the type marker is added to the array in the current location.
Example: Geonotes
The idea for this example originated during a trip abroad with a new smartphone: The program is a digital travel diary that automatically adds geographical coordinates to each entry and can display all entries on a map. The high data-roaming charges in Europe soon made it necessary to integrate another technology related to HTML5 -- Web Storage -- to keep costs down. Via the Web Storage API, the entries are stored locally in persistent memory, allowing the application to function even without an existing data connection.