HTML5 Browser Geolocation Browser Support

So today in my spare time I wanted to see how different browsers behave with HTML Geolocation and Google Maps. So far, I have done the following browsers: Firefox 16, Chrome 23, IE9, IE8 and Safari 5 for Windows. It is supported by the modern browsers. Here are the results. For the record, I am near Brisbane, Australia.

Currently the W3C Geolocation API is supported by the following desktop browsers:

• Firefox 3.5+
• Chrome 5.0+
• Safari 5.0+
• Opera 10.60+
• Internet Explorer 9.0+

View Project on GitHub

Firefox HTML5 Geolocation

Chrome HTML5 Geolocation

IE9 HTML5 Geolocation

IE8 HTML5 Geolocation

Safari (windows) HTML5 Geolocation

Some interesting results, especially IE9 getting the city wrong. I think I’ve seen Russia as the center of a viewport before so no surprises there. IE8 was never going to support this but I thought Safari for windows would. I will test on the Mac soon and post results. If you want to test your browser you can do so below. The geolocation can be used for other things not just plotting a point on a map: see W3c use cases for more examples.

Full Code Listing

< !DOCTYPE html>
    Get Geolocation Using HTML5 Demo | jQuery4u



      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_canvas {
        height: 100%;
      }
<p>      @media print {
        html, body {
          height: auto;
        }
<p>        #map_canvas {
          height: 650px;
        }
      }
    


      var map;
      function initialize() {
        var myOptions = {
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
        // Try HTML5 geolocation
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);
            var infowindow = new google.maps.InfoWindow({
              map: map,
              position: pos,
              content: 'Location found using HTML5.'
            });
            map.setCenter(pos);
          }, function() {
            handleNoGeolocation(true);
          });
        } else {
          // Browser doesn't support Geolocation
          handleNoGeolocation(false);
        }
      }
      function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
          var content = 'Error: The Geolocation service failed.';
        } else {
          var content = 'Error: Your browser doesn't support geolocation.';
        }
        var options = {
          map: map,
          position: new google.maps.LatLng(60, 105),
          content: content
        };
        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    

Frequently Asked Questions about Browser Geolocation