2016-06-26 8 views
0

GoogleマップのAPIをローカル環境で表示したいと考えています。 google apiジオロケーションサンプルを使用しました。google api geolocationサンプルセキュリティエラー

IEでマップを正常に表示しましたが、Google Chromeで表示できませんでした。

<!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 src="https://maps.googleapis.com/maps/api/js?key=API KEY&signed_in=true&callback=initMap" 
 
     async defer> 
 
    </script> 
 
    </body> 
 
</html>

私はあなたに以下のエラーメッセージが表示されます。

enter image description here

答えて

0

エラーはそれをすべて言います。 httpとhttpsのプロトコルが一致しません。これらのマップサンプルを正常に実行する方法については、私の手順を試してください。ローカルのサーバーのおかげで、すべてのMap JSサンプルをテストすることができます。

ローカル環境でどれGoogleマップJSサンプルを実行する方法

  1. あなたはPythonがコンピュータにインストールされていることを確認してください。あなたの端末で
  2. 実行this command

    のpython -mのSimpleHTTPServer

    8000 '0.0.0.0ポートでHTTPをサービングは8000 ...'は、ローカルサーバーの準備ができていることを意味します。

  3. Google Developer Consoleにアクセスしてください。使用しているのと同じAPIキー資格情報の下にURL起点としてhttp://localhost:8000を登録してください。 (有効にするには少なくとも5分かかります)
  4. アドレスバー/アドレスバーにhttp://localhost:8000/geolocation.htmlのようなGoogleマップファイルを実行します。

これが役に立ちます。

+0

ありがとうございます。できます!!! –

+0

もちろんできます:) – noogui

0

は、私は、Google Chromeブラウザのバージョンよりも50以上を使用していると思います。また、HTTP URL(例:http://192.168.33.10)からコードを呼び出そうとしています。 2016年4月20日以降、Chromeバージョン50.0からGeo Location APIへのアクセスを非セキュアなリソースから削除しました。そのコードを実行する場合は、URLはhttpsにする必要があります。それでも、Chromeブラウザでコードをテストしたい場合は、50.0未満のChromeブラウザを使用してください。うまくいくはずです。この変更を発表したGoogle通知へのリンクはhttps://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only?hl=enです。それがあなたに役立つかどうかを教えてください:) enter image description here

+0

ありがとうございました。あなたが言ったように私はそれを試みましたが、私はセキュリティのためにサイトを開くことができませんでした。私の友人は、Chromeブラウザのバージョン51を使用しており、アクセスすることができます。 –

+0

あなたがlocalhostからURLを打っている可能性があるので、あなたの友人はそれにアクセスできます。 Googleでは、「localhost」を安全でないとはみなしません。しかし、あなたのURLはhttp://192.168.33.10のようなものだったので、私はあなたがlocalhostからヒットしたくないと思った。私は更新された答えのGoogleのドキュメントからこのステートメントのスナップショットを添付しています。 –

関連する問題