Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

552 CHAPTER 14 Making your HTML location-aware

showMessage("Geolocation is not supported by this browser.");

}

}

function supportsGeolocation() {

return 'geolocation' in navigator;

}

function showMessage(message) {

$('#message').html(message);

}

function showError(error) {

switch (error.code) {

case error.PERMISSION_DENIED:

showMessage("User denied Geolocation access request.");

break;

case error.POSITION_UNAVAILABLE:

showMessage("Location information unavailable.");

break;

case error.TIMEOUT:

showMessage("Get user location request timed out.");

break;

case error.UNKNOWN_ERROR:

showMessage("An unknown error occurred.");

break;

}

}

15. Add the showPosition function that is called when the getCurrentPosition function call
    is successful.
    function showPosition(position) {
    var mapcanvas = document.getElementById('map');
    var coords = new google.maps.LatLng(position.coords.latitude
    , position.coords.longitude);
    var options = {
    zoom: 13,
    center: coords,
    mapTypeControl: false,
    navigationControlOptions: {
    style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(mapcanvas, options);
    var marker = new google.maps.Marker({
    position: coords,
    map: map,
    title: "You are here!"
    });
    }
    This is where the mapping takes place. The first line gets a reference to the
    ele-
    ment for the map and assigns it to the mapcanvas variable. The second statement uses