Find position on google map using html5 Geolocation for android and iPhone

In this article I am going to use html5 geolocation api to find your coordinates and by using these coordinates and Google map, you can find you location on the map.

HTML5 GeoLocation:

One Shot Position request: in this case we will use one shot position request because we only want the coordinates once. Before continue the original topic first I take look HTML5 Geolocation position accuracy, altitude, and permission.

Position and Position Accuracy

Different devices have different degrees of accuracy and it is important that your application be aware of the difference. A cell phone that has a GPS unit inside of it that is switched on is usually accurate within three meters. A cell phone without a GPS unit, with the GPS unit switched off to maximize battery, or at a location where the GPS can’t contact the GPS satellites will have to use cell tower triangulation to estimate the users location and is typically accurate within 3000 meters which is accurate enough to know what neighborhood the user is in but completely useless to tell them what building they are looking at.

If the user is accessing your site from a computer connected to a land-based broadband connection it can usually pinpoint the precise address by consulting a provider database and pinpointing the exact address from the DSL or cable provider.

To get the accuracy of the location information, you can query the accuracy property on the coords object. The accuracy property isn’t exact by any means but it will give your application a good sense as to whether or not you have a nearly precise position or a neighborhood.

Altitude and Altitude Accuracy

Most GPS enabled devices are capable of reporting altitude but non-GPS methods such as cell triangulation cannot report altitude. Altitude is frequently overlooked, it could be used in a variety of innovate ways to enable games, help users track skydiving, mountain climbing, position in a skyscraper and more.

If the device does not support altitude information, the altitudeAccuracy property on the position object will be null.

There is also support for the W3C Geolocation API on mobile devices:

• Android 2.0+
• iPhone 3.0+
• Opera Mobile 10.1+
• Symbian (S60 3rd & 5th generation)
• Blackberry OS 6
• Maemo

Permission, Latency and Error Handling

The HTML 5 specification explicitly requires the user grant permission to any web page requesting geolocation information. This means the request for location might still error even if the code has already checked for browser support if the user declines to provide your application with access.

Geolocation is not instantaneous. It usually takes between 1 and 20 seconds depending on the GPS device being used and whether or not the device already has a lock on the current location.

As a result of both the requirement that the browser ask the user to grant geolocation permission and the GPS time lag, the request for geolocation information is an asynchronous call.

One Shot Position request

Now, take a look on getCurrentPosition() function.

void getCurrentPosition(in PositionCallback successCallback, in optional PositionErrorCallback errorCallback,

in optional PositionOptions options);

First, this is a function that is available on the navigator.geolocation object, so you will need to have already retrieved this object in your script. As noted previously, make sure that you have a good fallback handler if your browser does not support HTML5 Geolocation.

The function takes one required parameter, and two optional ones.

• The successCallback function parameter tells the browser which function you want called when the location data is made available.
• The errorCallback function parameter tells the browser which function you want called when there is some error or exception has occurred.
• Finally, an options object can be provided to the HTML5 Geolocation service to fine-tune the way it gathers data. This is an optional parameter.

Now, I write a JavaScript function GetGeolocation() and called on the button click event.

function GetGeolocation() {

navigator.geolocation.getCurrentPosition(GetCoords, GetError);

}

navigator.geolocation  object is the core of HTML5 geolocation api. Now take a look on GetCoords() function.

function GetCoords(position){

  document.getElementById(“txtLatitude”).value = position.coords.latitude;

  document.getElementById(“txtLongitude”).value = position.coords.longitude;

  document.getElementById(“txtaccuracy”).value = position.coords.accuracy;

  FindmeOnMap(position.coords.latitude, position.coords.longitude);

}

GetCoords() function has an argument of position.The position will contain coordinates—as the attribute coords—and a timestamp for when the location data was gathered. While you may or may not need the timestamp, the coords attribute contains the crucial values for the location.

The coordinates always have multiple attributes on them, but it is up to the browser and the

hardware of the user’s device whether they will have meaningful values. The following are the first three attributes:

• latitude
• longitude
• accuracy

These attributes are guaranteed to have values and are fairly self-explanatory. latitude and longitude will contain the HTML5 Geolocation service’s best determined value of the user’s location specified in decimal degrees. accuracy will contain a value in meters which specifies how close the latitude and longitude values are to the actual location, with a 95% confidence level. Due to the nature of HTML5 Geolocation implementations, approximation will be common and coarse. Make sure to check the accuracy of the returned values before you present them with any certainty. Recommending a user to visit a “nearby” shoe store that is actually hours away could have unintended consequences.

The other attributes of the coordinates are not guaranteed to be supported, but they will return a null value if they are not:

• altitude—the height of the user’s location, in meters
• altitudeAccuracy—once again in meters, or null if no altitude is provided
• heading—direction of travel, in degrees relative to true north
• speed—ground speed in meters per second

Unless you are sure that your users have devices with access to such information, it is recommended that you not rely on them as critical to your application. While global positioning devices are likely to provide this level of detail, network triangulation will not.

 Google Map

Now, we have the coordinates and will use these to display your location/position on google map. First you have to include the google map JavaScript library as.

<script type=“text/javascript” src=“http://maps.googleapis.com/maps/api/js?sensor=true”> </script>

Also, create an html div element where you want to show your map with some width and height.

<div id=“map” style=“border:1px solid #0a057f; width:60%; height:500px; margin:5px;border-radius:10px;” ></div>

Now, take a look on FindmeOnMap() function.

function FindmeOnMap(lat, long) {

var latlng = new google.maps.LatLng(lat, long);

var myOptions = {

zoom: 12,

center: latlng,

mapTypeId: google.maps.MapTypeId.SATELLITE

};

var map = new google.maps.Map(document.getElementById(“map”), myOptions);

}

To learn more about google map type and how to use them see Google maps.

By using the google map api, create an object of latlong by providing the latitude, longitude values in it constructor, set the options and finally create an object of google map by passing the ‘div’ element and the options.

So, that’s it. This is one of the ways to find the positions on google map by using html5 geolocation. Here is the small code to test this reading. Just copy and paste on your html page and test it.