modernizr example

by anandhinava

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<div id="content" style="height: 450px"></div>

CSS

#map-canvas {
    height: 500px;
}

JavaScript

Modernizr.load({
    test: Modernizr.geolocation,
    nope: 'https://raw.github.com/inexorabletash/polyfill/master/geo.js',

    complete: function () {
        var initialLocation;
        var siberia = new google.maps.LatLng(60, 105);
        var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
        var map;
        var infowindow = new google.maps.InfoWindow();
        var mapOptions = {
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, onError);
            // also monitor position as it changes
            navigator.geolocation.watchPosition(showPosition);
        } else {
            onError();
        }

        function showPosition(position) {
            map = new google.maps.Map(document.getElementById("content"), mapOptions);

            var lat = position.coords.latitude;
            var lng = position.coords.longitude;

            initialLocation = new google.maps.LatLng(lat, lng);
            map.setCenter(initialLocation);
            infowindow.setContent(lat + " " + lng);
            infowindow.setPosition(initialLocation);
            infowindow.open(map);
        }

        function onError() {
            if (navigator.geolocation) {
                initialLocation = newyork;
                contentString = "Error: The Geolocation service failed.";
            } else {
                initialLocation = siberia;
                contentString = "Error: Your browser doesn't support geolocation. Are you in Siberia?";
            }
            mapOptions.zoom = 4;
            map = new google.maps.Map(document.getElementById("content"), mapOptions);
            map.setCenter(initialLocation);
            infowindow.setContent(contentString);
            infowindow.setPosition(initialLocation);
            infowindow.open(map);
        }
    }
});