Category Archives: HTML5 Geolocation

Another example of HTML5 Geolocation

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
Share

HTML5 Geolocation introduction

An intro for the HTML5 GeoLocation API. With this to work (currently) you have got to be on the Chrome dev channel which feel free to use at your own risk (!), or additionally working with Firefox 3.5 .

Step one

You can use standard object testing to determine if the browser supports GeoLocation.

<script>
    /**
    * This function is the callback which is passed the result from the .getCurrentPosition()
    * function. The pos argument can contain more information than just the latitude/longitude,
    * such as altitude, accuracy and speed information.
    * 
    * @param object pos The result from the getCurrentPosition() call
    */
    function myCallback(pos)
    {
        var myLatitude  = pos.latitude;
        var myLongitude = pos.longitude;
    }

    
    /**
    * Test for GeoLocation support and make the call
    */
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(myCallback);
    } else {
        alert("Sorry, your browser doesn't appear to support GeoLocation");
    }
    
</script>

Step two

Once you have tested for it, we can then retrieve the position using the getCurrentPosition() method. You pass this method a callback function which you define. This callback function is given an object (if successful), with various properties:

  • latitude
  • longitude
  • altitude (optional)
  • accuracy
  • altitudeAccuracy (optional)
  • heading (optional)
  • speed (optional)
  • timestamp

How does it work?

The GeoLocation API works by retrieving geographical information associated with Internet hardware. From the specification:

“Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device’s actual location.”

Related links

Incoming search terms:

  • geolocation html5 tutorial
Share
10 visitors online now
3 guests, 7 bots, 0 members
Max visitors today: 16 at 01:56 am UTC
This month: 74 at 04-21-2017 07:18 pm UTC
This year: 74 at 04-21-2017 07:18 pm UTC
All time: 513 at 06-01-2016 02:24 pm UTC
Get Adobe Flash player