HTML5 Guidelines for Web Developers

196 Chapter 7—Geolocation

As you already know from section 7.1.2, Online Map Services, the coordinates

from the geographical coordinate system (lat/lon) must be converted to the

Spherical Mercator system. Finally, the marker ll is placed on the determined

location; the relevant icon for the marker is loaded directly off the OpenStreet-

MapThe Geolocation specification includes another call, particularly suitable

for moving objects: navigator.geolocation.watchPosition(). The next example

demonstrates how a change in location can be represented graphically using the

Google Maps API.

7.5 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 loca-

tion accurately via GPS and using a browser while on the move. A crucial com-

ponent of the following experiment was an Android smartphone showing the

HTML page during a trip down the highway.

As you can see in Figure 7.4, 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.

Figure 7.4 Google Maps API on an Android cell phone

Calling the Geolocation API is once again done in window.onload and looks like

this:

var watchID = navigator.geolocation.watchPosition(

moveMe, posError, {enableHighAccuracy: true}

);