带有Google Maps API的Mobile上的地理位置服务失败

Question

I am using the following script on my site:

<script type="text/javascript">
    var map;

    function initialize() {
      var mapOptions = {
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
      var kmlLayer = new google.maps.KmlLayer("https://maps.google.ca/maps/ms?ie=UTF8&msa=0&output=kml&msid=210000746142049190989.0004ce14b7a8e95167602");
    kmlLayer.setMap(map);

      // 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.setZoom(14);
          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: errorFlag
      };

      var infowindow = new google.maps.InfoWindow(options);
      map.setCenter(options.position);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

        </script>

I am also using the following which is needed for mobile

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

But still when I visit the site on mobile, and I click to view the map I get the error "The Geolocation service failed."

Is there somthing else I am missing for the geo-location to work on mobile?

You can see the site and live example here on the site, right hand side if you scroll down just past the fold you will see "where can I get rumble?" click on that for the map.

EDIT I think it has somthing to do with the kmlLayer it seems to be defaulting to that on mobile?

var kmlLayer = new google.maps.KmlLayer("https://maps.google.ca/maps/ms?ie=UTF8&msa=0&output=kml&msid=210000746142049190989.0004ce14b7a8e95167602");
kmlLayer.setMap(map);

Answer 1

According to Google Maps zoom gets overridden, when using a kml file

in the function initialize, replace all you have before // Try HTML5 geolocation with:

var mapOptions = { 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
var kmlLayer = new google.maps.KmlLayer("https://maps.google.ca/maps/ms?ie=UTF8&msa=0&output=kml&msid=210000746142049190989.0004ce14b7a8e95167602", { map: map, preserveViewport: true });