Mapping

Description

More and more websites use mapping and geolocation services. In this example we display a Google map covering the Silicon Valley area by default.

Select the black button and see if your browser supports geolocation. Geolocation is the ability to provide the exact latitude/longitude of where the computer is located. It is an HTML5 feature supported by all latest browser versions. If your browser does support geolocation it will display a map of your exact location. If not it will suggest you upgrade to a more recent browser. Please be aware that the browser will ask you for permission to share this information with the website.

Note that your daily map quota is limited as these maps are rendered without a Google maps API key (if you need an API key for your own apps, you can obtain one for free).

Here is the Mapping App code:

var Patterns = {
    // ** namespace pattern
    namespace: function (name) {
        // ** single var pattern
        var parts = name.split(".");
        var ns = this;

        // ** iterator pattern
        for (var i = 0, len = parts.length; i < len; i++) {
            // ** || idiom
            ns[parts[i]] = ns[parts[i]] || {};
            ns = ns[parts[i]];
        }

        return ns;
    }
};

// ** namespace pattern 
// ** revealing module pattern
// ** singleton pattern
Patterns.namespace("InAction").Mapping = (function () {

    var loadMap = function (lat, lng, custom) {

        // ** namespace pattern  (google.maps)
        var position = new google.maps.LatLng(lat, lng);

        // ** options hash idiom
        var mapOptions = {
            center: position,
            zoom: custom ? 15 : 9,
            // ** namespace pattern  (google.maps)
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // ** namespace pattern  (google.maps)
        var map = new google.maps.Map($('#map_canvas').get(0),
            mapOptions);

        if (custom) {
            var image = '/img/pin.png';

            // ** options hash idiom
            var marker = new google.maps.Marker({
                position: position,
                map: map,
                icon: image,
                animation: google.maps.Animation.DROP
            })
        }
    }

    var myGeolocation = function () {
        // ** namespace pattern  (navigator.geolocation)
        if (!navigator.geolocation) {
            alert("Browser does not support geolocation. 
                   Upgrade to a more recent browser.");
        } else {
            navigator.geolocation.getCurrentPosition(function (position) {
                loadMap(position.coords.latitude, position.coords.longitude, true);
            });
        }
    }

    var start = function () {

        // Default location: Silicon Valley
        loadMap(37.33259, -121.889877, false);

        // ** observer pattern
        $("#geo").click(myGeolocation);
    };

    return { start: start };
})();

$(function () {

    // ** facade pattern
    Patterns.InAction.Mapping.start();
});

The idioms and patterns used in this example are:

|| and && idiom
Options Hash idiom
Namespace pattern
Single var pattern
Module pattern
Iterator pattern
Singleton pattern
Observer pattern
Façade pattern

We have discussed these patterns in the other examples. This mapping example shows that Google maps itself makes extensive use of the Namespace pattern and Options Hash idiom.

Launch App