位置情報がブラウザで機能しない

<!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> 
    <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> 
    </body> 
</html>

このページを実行しようとすると、このページにGoogleマップが正しく読み込まれなかったというメッセージが表示されました。 JavaScriptを参照してください。ブラウザにはすでに自分の所在地にアクセスする権限があります。しかし、何が問題なのか分かりません。位置情報がブラウザで機能しない

出典

2016-10-11 ralkutbi

エラーメッセージは正確には何ですか？このエラーはどのブラウザで発生しましたか？ "JavaScriptを参照してください。" - あなたのjavascriptの何も「Googleマップを正しくロードしていませんでした」というエラーは何ですか？ –

あなたのコードは正常に動作します - https://jsfiddle.net/m1jwzc2b/ –

はhttpsまたはhttpのローカルサーバーですか？ Googleは2016年中頃からSSL接続しか許可していません。私もこの問題があり、SSLを使用するためにアプリケーションをリファクタリングしなければならなかった – mtizziani

コードはうまく見えますが、APIキーを忘れてしまっています。 https://developers.google.com/maps/documentation/javascript/get-api-key その後、YOUR_API_KEYにKEYをsubsitute：：だから、あなたは、このページでキーを取得する必要が

src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

出典

2016-10-11 06:01:34 Arnau

私はAPIキーを取得しましたが、ページに私の場所が表示されません。ジオロケーションサービスが失敗したとのことです。 – ralkutbi

位置情報がブラウザで機能しない

答えて

関連する問題