This blog post explores how different web browsers handle HTML5 Geolocation and Google Maps. The author tested Firefox 16, Chrome 23, IE9, IE8, and Safari 5 for Windows. Modern browsers generally support this feature. The tests were conducted near Brisbane, Australia.

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

Firefox HTML5 Geolocation Test Results:

Chrome HTML5 Geolocation Test Results:

IE9 HTML5 Geolocation Test Results:

IE8 HTML5 Geolocation Test Results:

Safari (Windows) HTML5 Geolocation Test Results:

The author notes some interesting discrepancies, particularly IE9 incorrectly identifying the city. IE8, as expected, lacked support, and Safari for Windows also showed unexpected behavior. Further testing on a Mac is planned. A code sample demonstrating HTML5 geolocation with Google Maps is provided below. The author also points out that geolocation has applications beyond map plotting, referencing W3C use cases for further examples.

Code Sample:

    Get Geolocation Using HTML5 Demo | jQuery4u



      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_canvas {
        height: 100%;
      }

      @media print {
        html, body {
          height: auto;
        }

        #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:

A FAQ section addressing the Geolocation API's functionality, accuracy, usage, privacy implications, browser compatibility, error handling, tracking capabilities, testing methods, offline functionality, and cost is included.

The above is the detailed content of HTML5 Browser Geolocation Browser Support. For more information, please follow other related articles on the PHP Chinese website!