Search code examples
javascripthtmlgoogle-mapsgeolocationgoogle-maps-api-2

Can't get the current location with google-maps api on a website

i'm a bit new to google maps api, what i want to achieve is to integrate a map to my website and to get my current position. I followed some tutorials and i saw to demos, everything was fine and it's working and i get my current localisation.

http://www.html5-css3.fr/demo/exemple-geolocalisation-html5-api-google-maps http://www.astuces-webmaster.ch/page/geoloc-html5-google-maps

But the problem is when i write my own and when i want to see it in the navigator, i don't get my localisation. I thought i didn't have the authorization to get the location, so i've changed it in the navigator parameters. I think the problem is when i run a page which is in local in my hard drive,i am blocked. i get this message "tracking your location has been blocked for this page" enter image description here

This is my code :

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% ; width:100%;}
  </style>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
  <script type="text/javascript">

    var previousPosition = null;

    function initialize() {
      map = new google.maps.Map(document.getElementById("map_canvas"), {
            zoom: 19,
            center: new google.maps.LatLng(48.858565, 2.347198),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });   
    }

    if (navigator.geolocation)
      var watchId = navigator.geolocation.watchPosition(successCallback, null, {enableHighAccuracy:true});
    else
      alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");

    function successCallback(position){
      map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
        map: map
      });  
      if (previousPosition){
        var newLineCoordinates = [
           new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),
           new google.maps.LatLng(position.coords.latitude, position.coords.longitude)];

        var newLine = new google.maps.Polyline({
          path: newLineCoordinates,        
          strokeColor: "#FF0000",
          strokeOpacity: 1.0,
          strokeWeight: 2
        });
        newLine.setMap(map);
      }
      previousPosition = position;
    };    
  </script>
</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>
Solution

  • It looks like you previously set your browser to deny sharing your location. Click the icon showing geolocation is denied and try to enable it. If not possible, try restarting your browser.

    Worst case is try it in a different browser (geolocation from a file:/// URL can be prohibitive on Chrome).