admin管理员组

文章数量:1336589

I'm using Google Maps API v3 Geolocation to get the users actual location. I found this post from Google Developers:

Here my code (equals to the code of Google Maps example):

<head>
<script src=".exp&sensor=true"></script>

<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see a blank space instead of the map, this
// is probably because you have denied permission for location sharing.

var map;

function initialize() {
  var mapOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // 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);
</script>
</head>

<body>
    <div id="container">
        <div class="entry-content">
            <div class="blogtitle">IT</div><p>&nbsp;</p></td><td> </td><td><p>&nbsp;</p></td></tr></tbody></table><p>&nbsp;</p>
            <div id="map-canvas"></div><!-- map-canvas end -->
        </div><!-- entry-content end -->
    </div><!-- container end -->
</body>

This works quite fine in Firefox but not in Google Chrome & Safari. I think because Chrome & Safari are webkit browsers. But I don't know how to fix it.

Can someone please help me?

I'm using Google Maps API v3 Geolocation to get the users actual location. I found this post from Google Developers:

https://developers.google./maps/documentation/javascript/examples/map-geolocation

Here my code (equals to the code of Google Maps example):

<head>
<script src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=true"></script>

<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see a blank space instead of the map, this
// is probably because you have denied permission for location sharing.

var map;

function initialize() {
  var mapOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // 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);
</script>
</head>

<body>
    <div id="container">
        <div class="entry-content">
            <div class="blogtitle">IT</div><p>&nbsp;</p></td><td> </td><td><p>&nbsp;</p></td></tr></tbody></table><p>&nbsp;</p>
            <div id="map-canvas"></div><!-- map-canvas end -->
        </div><!-- entry-content end -->
    </div><!-- container end -->
</body>

This works quite fine in Firefox but not in Google Chrome & Safari. I think because Chrome & Safari are webkit browsers. But I don't know how to fix it.

Can someone please help me?

  • javascript
  • google-maps
  • google-maps-api-3
  • geolocation
Share Improve this question asked Oct 25, 2013 at 11:44 TylerTyler 8825 gold badges18 silver badges33 bronze badges 2
  • what bit of it doesn't work? You don't see the map, you're not able to get the user's location, you get a javascript error? – duncan Commented Oct 25, 2013 at 12:29
  • There es an error: Error: The Geolocation service failed. and then the marker points in a forest somewhere in Russia (I'm in Switzerland...) – Tyler Commented Oct 25, 2013 at 13:01
Add a ment  | 

2 Answers 2

Reset to default 2

I have found this

It appears this is a security restriction for the file protocol. Looks like you are going to need to host it locally from a server.

I've tested your code with a local server and it just works fine. Hope I could help.

Try to use HTML5 geolocation APIinstead of Google Maps' one for the browsers you are having problems with.

You can find the reference here

本文标签： javascriptGoogle Maps API v3 Geolocation not working in Google ChromeStack Overflow

版权声明：本文标题：javascript - Google Maps API v3 Geolocation not working in Google Chrome - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742410658a2469719.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。