i




 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
HTML 5 geolocation API
08-24-2011, 06:32 PM (This post was last modified: 08-24-2011 06:34 PM by haider.ali.)
Post: #1
HTML 5 geolocation API
The Geolocation API lets you share your location with trusted web sites. The latitude and longitude are available to JavaScript on the page. it will ask for permission to sahre your location with the website

here the code that show the map according to your location using html5 ang google map.



Code:
<!DOCTYPE HTML>
<html>
<head>
<tittle>Geolocation</tittle>
<style>
#mydiv
{
    height:300px ;
    width:300px;
    background-color:#CCC;
}
</style>
&lt;script src="http://maps.google.com/maps/api/js?sensor=false" ></script>
<script type="text/javascript"&gt;    
    var lng,lat;    
    if(!navigator.geolocation)
    {
        alert("geolocation not supported");
    }
    else
    {
        navigator.geolocation.getCurrentPosition(success,error);
    }        
    function success(position) {
        lng = position.coords.longitude;
        lat = position.coords.latitude;
        
        showMap(document.getElementById('mydiv'),lng,lat);        
    }        
    function showMap(div,lng,lat)
    {
        var cpos = new google.maps.LatLng(lat,lng);
        
        var opt = {
            zoom:  15,
            center : cpos,
             mapTypeId: google.maps.MapTypeId.ROADMAP
        }        
        var map = new google.maps.Map(div,opt);
        map.setTilt(0);        
        var marker = new google.maps.Marker(
        {
            position: cpos ,
            tittle : "You are here"
        });
        marker.setMap(map);
    }
    
    function error(error){
            alert(error.code);
    }
    
&lt;/script>
<head>
<body>
<div id ="mydiv"  ></div>
</body>
</html&gt;

success method contains the position argument which itself contain longitude and latitude ,

error function is called when an error in retrieving position is occurred

its argument contains the error code which can be checked to know which kind of error occured

here are examples which you can compare to


1) error.TIMEOUT
2) error.POSITION_UNAVAILABLE
3) error.PERMISSION_DENIED


for example:-

if(error.code == error.TIMEOUT)
alert('Geolocation Timeout');


and mapTypeID can have following values
ROADMAP (displays the default road map view)
SATELLITE (displays Google Earth satellite images)
HYBRID (displays a mixture of normal and satellite views)
TERRAIN (displays a physical map based on terrain information.)


for more info on google maps visit this link




Attached File(s)
.htm  index.htm (Size: 1.09 KB / Downloads: 10)
Quote


Possibly Related Threads...
Thread: Author Replies Views: Last Post
  Html Rich Text Editor using document API haider.ali 2 5,614 03-01-2012 08:57 PM
Last Post: haider.ali



User(s) browsing this thread: 1 Guest(s)