Geolocation service failed on Mobile with google maps api

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);

score 1 · Accepted Answer · edited May 23 '17 at 10:25

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 });

edited May 23 '17 at 10:25

Community

1
1

answered Jul 19 '13 at 19:07

dievardump

2,484
17
21

One thing I can't manage to get working is the icon size. Apparently this is whats needed but Im having issues implementing it with the KML layer? http://stackoverflow.com/questions/7842730/change-marker-size-in-google-maps-v3 And here is your jsfiddle if it helps: http://jsfiddle.net/X5r8r/1412/ – matt Jul 22 '13 at 16:56

Geolocation service failed on Mobile with google maps api

1 Answers1