HTML5 Location-Based Applications - Beginning Android Web Apps Development - page 160

boilerplate stuff from Google to allow a div to act as a container for map objects.
Following this, you'll see the JavaScript reference to the Google Maps API (the following
line has the formatting massaged to better fit this page):
<script type="text/javascript"
src=" http://maps.googleapis.com/maps/api/js ?
key=AIzaSyBpoxnQbCGPTIcpIJ8YPO3pTNcJX3zbc4c&sensor=false ">
</script>
This invokes the Maps API with a particular API key. This is Google's technique for
uniquely identifying users of its API, and also rate-limiting how many calls to various
APIs can be made. You should definitely sign up for your own API key so that you can
control your own API access, monitor usage, etc.
TIP: At the time of printing, the free Google Maps API is throttled to 25000 invocations per day.
To get your own Maps API key, visit http://developer.google.com/ an d follow the instructions.
Our initialize() function is very similar to our old checkIn() function, so we won't
rehash that here. The key differences are it populates two local variables for latitude and
longitude, and then calls our new function, mapMe() , to do all the hard mapping work.
function mapMe(thisLat, thisLong) {
var myLatlong = new google.maps.LatLng(thisLat, thisLong);
var myOptions = {
center: new google.maps.LatLng(thisLat, thisLong),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapContainer"), myOptions);
var marker = new google.maps.Marker({
position: myLatlong,
map: map,
title:"Hello World!"
});
}
Within mapMe() , we complete four main actions to present our map and location marker.
First, we create a google.maps.LatLng object using the latitude and longitude we
received from our HTML5 geolocation calls. Next, we construct an options object
named myOptions , which consists of a center object which will be used to choose the
center of the map presented in the browser. The zoom value dictates the starting zoom
setting in the map—this is very important on mobile devices, as the default zoom is at
far too high a scale, leaving the user to zoom in several times with imprecise pinch and
zoom techniques.
We then get to the meat of our mapping. We create a new google.maps.Map object, and
pass the element that will hold the map (" mapContainer " is the ID of our <div> in our
HTML), and the options object we constructed. This actually creates and displays the
map in the user's browser. Following its creation, we create a google.maps.Marker
object at the same coordinates on our map, and give it a meaningful label. The results in
Figure 9-7 speak for themselves.