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:

    <script type="text/javascript" src="" ></script>
    <script type="text/javascript" src="" ></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, 
        // ... add new marker at map's center ...
        marker = new google.maps.Marker( 
                                { position: mapCenter, 
                                       map: map, title: "Your position" });    
        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 ...
          } else {
            alert("Geolocation not available");
    <div id="map" style="width: 640px; height: 480px;"></div>

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