Sunday, October 10, 2010

Geolocation API - Get Current Position

Look around :) - what are you doing here? how did you get here? and where the heck is "here"? I'll not be able to help you with the first two questions ;) - but the last one can be quickly answered with the Web Browser supporting the W3C Geolocation API.

Let's use following HTML:

<html>
  ...
  <head>
    ...
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" ></script>
    <script type="text/javascript">
      var map;
      var mapCenter;
      var marker;
            
      function handleError(error) {
        alert('Error: ' + error.message + ' (' + error.code + ')');
      }
            
      function locationFound(position) {        
        // Center map on your location ...        
        mapCenter = new google.maps.LatLng(position.coords.latitude, 
                                           position.coords.longitude);
        map.setCenter(mapCenter);      
        // ... add new marker at map's center ...
        marker = new google.maps.Marker( 
                                { position: mapCenter, 
                                       map: map, title: "Your position" });    
      } 
         
      $(document).ready(
        function() {
          // Create new Google Map using the div having id 'map' ...
          map = new google.maps.Map($('#map')[0], 
                             {      zoom: 14, 
                               mapTypeId: google.maps.MapTypeId.TERRAIN });
          // ... check if your browser supports W3C Geolocation API ...
          if (navigator.geolocation) {
            // ... ask for current position ...
            navigator.geolocation.getCurrentPosition(locationFound, 
                                                     handleError);
          } else {
            alert("Geolocation not available");
          }
      });
    </script>
    ...
  </head>
  <body>
    <div id="map" style="width: 640px; height: 480px;"></div>
  </body>
</html>

I started with Google Chrome and when the above code has loaded in it, it asked first:


With trembling heart I pressed "Allow", and after few moments, I saw the desired position on map:


Don't ask me how they are able to track me down ;) - I can see some possibilities: black magic, IP number tracking, some hidden cameras, or electronic bugs in my apartment ;) - to discard the last possibility, I took my iPhone and went out for the stroll - and guess what ;) - when I opened the above page, iPhone asked me if I want to reveal my current position to the mobile Safari, and when I confirmed, showed me similar map view to the above ...

Some links for the dessert:
Which Devices Support Javascript Geolocation via navigator.geolocation?
How to Use iPhone JavaScript Geolocation
How to use the W3C Geolocation API (Opera)
Using geolocation (Firefox)

No comments:

Post a Comment

Post a Comment