Using Cloud Services: A Transport Application - Beginning Android Web Apps Development - page 172

google.map.Marker is overlaid on a map, any associated MarkerImage rendered with the
top left of the image at the anchor point. We actually want the pointy end of our pin
image to appear to point visually to our location of interest, so we want the middle,
bottom edge of our MarkerImage to line up with our location result. To achieve this, you'll
see we've offset the anchor by half the width of the pin image—10 pixels—and the
complete height of the pin image - 34 pixels.
Preparing Our Map
With those preparations made, we plunge into the main function used to drive our transit
application, the prepareMap() function.
function prepareMap() {
getLocation();
myTransitMap = new google.maps.Map(document.getElementById("map"), {
center: myLatLong,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var yourMarker = new google.maps.Marker({
position: myLatLong,
map: myTransitMap,
icon: youMarker,
title:"You!"
});
myLocalSearch = new GlocalSearch();
myLocalSearch.setSearchCompleteCallback(null, processLocalSearchResults);
}
The prepareMap() function is easily understood, broken down into its four main actions.
First, we invoke our getLocation() function, which is mostly a rebadged version of the
code we showed in the initialize() function in chapter 9 in listing 9-5. Here it is again
for the sake of completeness:
function getLocation() {
if (supportsGeo()) {
myLatitude = "";
myLongitude = "";
navigator.geolocation.getCurrentPosition(
function(position) {
myLatitude = position.coords.latitude;
myLongitude = position.coords.longitude;
},
function(error) {
switch(error.code) {
case error.TIMEOUT:
alert ('Geolocation returned a timeout error');
break;
case error.POSITION_UNAVAILABLE:
alert ('Geolocation returned a position unavailable error');
break;