HTML and CSS Reference
In-Depth Information
Listing 6-14. Retrieving the Location of the User
<div id="map">
</div>
<script src=" http://www.google.com/jsapi?key=ABQIAAAAlJFc1lrstqhgTl3ZYo38bBQcfCcww1WgMTx
EFsdaTsnOXOVOUhTplLhHcmgnaY0u87hQyd-n-kiOqQ " >
</script>
<script>
(function () {
google.load("maps", "2");
google.setOnLoadCallback(function () {
var map = new google.maps.Map2(document.getElementById("map")),
markerText = "<h2>You are here</h2><p>This is your current position</p>",
markOutLocation = function (lat, long) {
var latLong = new google.maps.LatLng(lat, long),
marker = new google.maps.Marker(latLong);
map.setCenter(latLong, 15);
map.addOverlay(marker);
marker.openInfoWindow(markerText);
google.maps.Event.addListener(marker, "click", function () {
marker.openInfoWindow(markerText);
});
};
map.setUIToDefault();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
markOutLocation(position.coords.latitude, position.coords.longitude);
},
function () {
markerText = "<p>You should accept the Geolocation request, otherwise your
position cannot be determined.</p>";
markOutLocation(59.3325215, 18.0643818); // Garden Island, Port Adelaide, Australia
});
}
else {
markerText = "<p>Geolocation is not supported. Welcome to my favourite location.</p>";
markOutLocation(-34.928621, 138.599959); // Rundle Mall, Adelaide, Australia
}
});
})();
</script>
the position is approximate only. in the previous example, we get a marker that does not necessarily mark the
exact location of the user. More sophisticated interfaces, such the “location-aware Browsing” test page of Firefox [13],
provide a semitransparent circle above the map rather than a marker pointing to an exact position.
Tip
The HTML5 Geolocation API is supported by IE9+, Firefox 3.5+, Chrome 5.0+, Opera 10.6+, and Safari 5+.
 
 
Search WWH ::




Custom Search