Google Maps API v3 Geolocation not working in Google Chrome

javascript google-maps google-maps-api-3 geolocation

14,710

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.

14,710

Author by

Tyler

Updated on June 04, 2022

Comments

Tyler almost 2 years

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

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

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

<head>
<script src="https://maps.googleapis.com/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?

Tyler over 10 years

Hmm. Thank you, you know how I can host it from a local server? An example?
zitscher over 10 years

Depends on which OS you are using. I'm using MAMP (mamp.info) for OSX. If you are using Windows check out XAMP. Just put your html/php/css/whatsoever files in the htdocs folder and start up the server. Here's a small FAQ for MAMP (mamp.info/en/documentation/faq.html)
Tyler over 10 years

You mean XAMPP? I'm using windows. In my company we don't use XAMPP. We use IIS. You know how to host it in this way?
zitscher over 10 years

Yes, i meant XAMPP. I have no clue about IIS. Just give XAMPP a try, it's very straight forward and easy to use!
Tyler over 10 years

I already know XAMPP. I use it at home to create some test website (just to improve my HTML/HTML5,CSS/CSS3 and jQuery skills). But in our company they don't want to use XAMPP because they use IIS many years before :) But thank you for trying to help me, I think I will figure it out and post the solution here :)