HTML5 Samples

Javascript:

<!– load the google ajax api –>
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
var map;

// load the specifc api you want. In this case I’m using the maps api, version 2.
google.load(“maps”, “2″);

var map;
var geocoder;

// call this function when the page loads
function initialize() {
// create the map inside the “map” div
map = new GMap2(document.getElementById(“map”));
map.setCenter(new GLatLng(0, 0), 1);
// geocoder is used to get the address from co-ordinates
geocoder = new GClientGeocoder();
}

function plotAddress(response)
{
// clear the map
map.clearOverlays();
// check the response is OK
if (!response || response.Status.code != 200)
{
alert(“Unable to resolve the coordinates.”);
}
else
{
// get the first placemarker from the response
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
// create a marker
marker = new GMarker(point);
// set center with new point and zoom in (13)
map.setCenter(point, 13);
// add the marker
map.addOverlay(marker);
// update address div
var addr = document.getElementById(‘address’);
addr.firstChild.data = place.address;
}
}

function currentPositionSuccessfulCallback(position)
{
// try to get a human readable address from the lat and long coordinates. Issue callback (plotAddress) when done.
geocoder.getLocations(new GLatLng(position.coords.latitude, position.coords.longitude), plotAddress);
}

if (navigator.geolocation)
{
// try to obtain the current position. If the call is successful, the callback method
// will be invoked.
navigator.geolocation.getCurrentPosition(currentPositionSuccessfulCallback);
}
else
{
alert(“Get yourself a real browser! Firefox 3.1b3+.”);
}

google.setOnLoadCallback(initialize);
</script>

The HTML:

<div id=”map” style=”width: 500px; height: 300px”></div>

Your approximate location is: <span id=”address”>Unknown</span>.

Incoming search terms:

• html5 geolocation tutorial
• html5 geolocation example
• geolocation html5 example
• html5 geocoding
• html5 geolocation sample
• html5 geocode
• html5 geolocation examples
• html 5 geolocation tutorial
• html geolocation example
• geolocation html5 sample