HTML 5 Geolocation with Safari on the iPhone 3.0 OS, Firefox 3.5 and Chrome

HTML 5 Geolocation 

Your address: Nehru Park Rd, Indore, Madhya Pradesh, India

This is a quick demonstration of the proposed HTML 5 standard for a Geolocation API.
If your browser does not support geolocation, but you do have a GPS unit in your browsing device, you can try the newest version of Firefox or a geolocation addon for older versions of Firefox. Both will fallback on other options for geolocation (IP address, WiFi networks in your area) if you do not have a GPS device installed. Google Chrome is also an HTML 5 geolocation aware browser.
The first step is to retrieve the Javascript object with 'navigator.geolocation':

if (navigator.geolocation) 
{
 navigator.geolocation.getCurrentPosition( 
 
  function (position) {  
 
  // Did we get the position correctly?
  // alert (position.coords.latitude);
 
  // To see everything available in the position.coords array:
  // for (key in position.coords) {alert(key)}
 
  mapServiceProvider(position.coords.latitude,position.coords.longitude);
 
  }, 
  // next function is the error callback
  function (error)
  {
   switch(error.code) 
   {
    case error.TIMEOUT:
     alert ('Timeout');
     break;
    case error.POSITION_UNAVAILABLE:
     alert ('Position unavailable');
     break;
    case error.PERMISSION_DENIED:
     alert ('Permission denied');
     break;
    case error.UNKNOWN_ERROR:
     alert ('Unknown error');
     break;
   }
  }
  );
 }
}
else // finish the error checking if the client is not compliant with the spec

Next, I've abstracted the mapping function so we can easily change providers if necessary:

function mapServiceProvider(latitude,longitude)
{
 // querystring function from prettycode.org: 
 // http://prettycode.org/2009/04/21/javascript-query-string/
 
 if (window.location.querystring['serviceProvider']=='Yahoo')
 {
  mapThisYahoo(latitude,longitude);
 }
 else
 {
  mapThisGoogle(latitude,longitude);
 }
}

Finally, send the coordinates to the mapping system, plot the client's location, and reverse geocode the longitude and latitude to give us back a human readable address:

// be sure to include the script to initialize Google or Yahoo! Maps
 
function mapThisGoogle(latitude,longitude)
{
 var mapCenter = new GLatLng(latitude,longitude);
 map = new GMap2(document.getElementById("map"));
 map.setCenter(mapCenter, 15);
 map.addOverlay(new GMarker(mapCenter));
 
 // Start up a new reverse geocoder for addresses?
 geocoder = new GClientGeocoder();
 geocoder.getLocations(latitude+','+longitude, addAddressToMap);
}

I believe this HTML 5 geolocation demo fixes a few minor glitches in the previous one at maxheapsize. Rather than feeding it through an input text box, like on maxheapsize, I've found it more reliable to send the coords in directly to the Google Geocoder. You'll find on the maxheapsize example that if you refresh the page on your iPhone, the locating function will fail. Not so with this example here.
I also think that adding a short (500 ms) delay to the map initialization gives more accurate geolocation results on the iPhone with Safari, but I may be mistaken.

source link:
http://merged.ca/iphone/html5-geolocation
http://blog.josemanuelperez.es/2010/07/google-maps-geolocation-directions-specific-destination/