7.6 Example: Geonotes 197The real work takes place in the function moveMe():
function moveMe(position) {
latlng = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude);
bounds = map.getBounds();
map.setZoom(16);
if (!bounds.contains(latlng)) {
map.setCenter(latlng);
}
if (marker.length >= maxMarkers) {
m = marker.shift();
if (m) {
m.setMap();
}
}
marker.push(new google.maps.Marker({
position: latlng, map: map,
title: position.coords.accuracy+"m lat: "
+position.coords.latitude+" lon: "+
position.coords.longitude
}));
}
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 out-
side 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.
7.6 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 coordi-
nates 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 re-
lated 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. For a detailed explanation of
the Web Storage API, see Chapter 8, Web Storage and Offline Web Applications.