HTML5 and CSS3, Second Edition

(singke) #1

Figure 36—Our current location is marked on the map with a Y.


We define the size of the image, and then we tell the Maps API that we did
not use any sensor device, such as a client-side geolocation, with the informa-
tion we’re passing to this map. Then we define each marker on the map by
giving it a label and an address. We could use comma-separated pairs of
coordinates for these markers if we had them, but an address is easier for
our demonstration.

How to Be Found


We need to plot our visitor’s current location on this map, and we’ll do that
by providing latitude and longitude for a new marker. We can ask the
browser to grab our visitor’s latitude and longitude, like this:

html5_geolocation/javascripts/geolocation.js
vargetLatitudeAndLongitude=function(){
navigator.geolocation.getCurrentPosition(function(position){
showLocation(position.coords.latitude,position.coords.longitude);
});
};

This method prompts the user to provide us with her coordinates. If the visitor
allows us to use her location information, we call the showLocation() method.

The showLocation() method takes the latitude and longitude and reconstructs
the image, replacing the existing image source with the new one. Here’s how
we implement that method:

Chapter 10. Creating Interactive Web Applications • 228


Download from Wow! eBook <www.wowebook.com> report erratum • discuss

Free download pdf