2016-05-25 20 views
2

次のURLのコードをAPIの有無にかかわらず使用していますが、Chrome上の場所はロードされません。同じことがIEとFirefoxでうまくいきます。ジオロケーションがChromeで動作しない

誰でも問題の原因を理解できるようになります。地図、場所はGoogleのAPIのいずれかを使用する予定の場合はこの点で任意の助けが

<script> 
 
     // Note: This example requires that you consent to location sharing when 
 
     // prompted by your browser. If you see the error "The Geolocation service 
 
     // failed.", it means you probably did not give permission for the browser to 
 
     // locate you. 
 

 
     function initMap() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: -34.397, lng: 150.644}, 
 
      zoom: 6 
 
     }); 
 
     var infoWindow = new google.maps.InfoWindow({map: map}); 
 

 
     // Try HTML5 geolocation. 
 
     if (navigator.geolocation) { 
 
      navigator.geolocation.getCurrentPosition(function(position) { 
 
      var pos = { 
 
       lat: position.coords.latitude, 
 
       lng: position.coords.longitude 
 
      }; 
 

 
      infoWindow.setPosition(pos); 
 
      infoWindow.setContent('Location found.'); 
 
      map.setCenter(pos); 
 
      }, function() { 
 
      handleLocationError(true, infoWindow, map.getCenter()); 
 
      }); 
 
     } else { 
 
      // Browser doesn't support Geolocation 
 
      handleLocationError(false, infoWindow, map.getCenter()); 
 
     } 
 
     } 
 

 
     function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
 
     infoWindow.setPosition(pos); 
 
     infoWindow.setContent(browserHasGeolocation ? 
 
           'Error: The Geolocation service failed.' : 
 
           'Error: Your browser doesn\'t support geolocation.'); 
 
     } 
 
    </script> 
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
 
    </script>
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Geolocation</title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    </body> 
 
</html>

+1

次のURLから保護されたURLが必要であることを理解していますhttps://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only – user1361799

答えて

2

を高く評価しているChromeの設定

の下でオンになっているのでご注意くださいこの場合は、まずMaps JavaScript APIに記載されているようにAPIキーを取得する必要があります。それがブラウザタイプであることを確認してください。 。

だからあなたの場合には同様にGoogleデベロッパーコンソールで得られたものとYOUR_API_KEYを置き換える:

<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"> 

また、URLの起源を登録することを忘れてはいけません。これは、ローカルホストまたは展開URL、例えば:

http://localhost:3333http://myintranethttp://192.168.1.1、のみHTTPS用http://mywebsite.com

0

のいずれかとすることができます!

[廃止予定] getCurrentPosition()およびwatchPosition()は安全でない点では動作しなくなった この機能を使用するには、 をアプリケーションをHTTPSなどの安全な起点に切り替えることを検討する必要があります。

+0

OPは質問にコメントを投稿しました彼らがすでにそれを知っていたことに気づいた。しかし、助けてくれてありがとう! –

+1

申し訳ありませんが、通知しなかった – Falselight

0

ブラウザのURLにlocalhostの代わりに127.0.0.1と書いただけで、うまくいきました。

関連する問題