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://ift.tt/18mqcxL http://ift.tt/1A7vZg0

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"

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://ift.tt/UE5hJi"></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>