70-480 - GeoLocation - Google Map

by Kyle Pennell

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="message"></div>
<div id="map"></div>

CSS

body { font:0.9em arial, sans-serif; }

#map {
    width: 800px;
    height: 500px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid;
}

#message {
    width: 800px;
    height: 50px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid;
}

JavaScript

$(document).ready(function () {
    getLocation();
});

function supportsGeolocation() {
    return 'geolocation' in navigator;
}
    
function showMessage(message) {
    $('#message').html(message);	
}
    
function getLocation() {
    if (supportsGeolocation()) {
        watchId = navigator.geolocation.getCurrentPosition(showPosition, showError);
    }
    else {
        showMessage("Geolocation is not supported by this browser.");
    }
}

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!"
    });
}

function showError() {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            showMessge("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;
    }
}