Google Maps of JQuery Mobile,HTML5

In this demo we show you how to:

• Integrate with Google Maps.
• How to get the users current location with the Geolocation API.
• How to plot a point on the map using your current location.
• How to display a default location (Hollywood, CA) if Geolocation is unavailable or a user declines to share it.

HTML source

<div data-url="map-page" data-role="page" id="map-page">

    <div data-role="header" data-theme="a">

    <h1>Maps</h1>

    </div>

    <div role="main" class="ui-content" id="map-canvas">

        <!-- map loads here... -->

    </div>

</div>

 

JS source

/*

 * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html

 * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html

 */

$( document ).on( "pageinit", "#map-page", function() {

    var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support

    if ( navigator.geolocation ) {

        function success(pos) {

            // Location found, show map with these coordinates

            drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));

        }

        function fail(error) {

            drawMap(defaultLatLng);  // Failed to find location, show default map

        }

        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds

        navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});

    } else {

        drawMap(defaultLatLng);  // No geolocation support, show default map

    }

    function drawMap(latlng) {

        var myOptions = {

            zoom: 10,

            center: latlng,

            mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        // Add an overlay to the map of current lat/lng

        var marker = new google.maps.Marker({

            position: latlng,

            map: map,

            title: "Greetings!"

        });

    }

});

CSS source

#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }

 

预览效果如下：

首先提示共享位置信息

然后就直接定位到亲的归属地啦