2017-06-21 14 views
0

上で動作しますので、私は彼女のウェブサイトを見ているどのように私の雇用を表示するngrok一時的なサーバーをセットアップするが、その後の一方で、グーグルマップのJavaScript APIがngrokにしながら、失敗したことに気づきました私のlocalhostは動作していますが、これはngrokで変わったのでしょうか、それとも実際のサーバーでホストを開始すると起こりますか?は、GoogleがJavaScript APIのサーバーに「ジオロケーションサービスは失敗しました」にマッピングが、ローカル

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.'); 
} 

orders.php:

<div id="map"> 
    <script>initMap()</script> 
</div> 


<script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=REDACTED&callback=initMap"> 
</script> 
私は/scripts/js/geolocation.js上のジオロケーションと、それは/orders.phpに

geolocation.jsで呼び出しているページを持っています

のLocalhost: Local:

Ngrok: Ngrok

このaswellで助けを必要とするかもしれない誰かの今後の参考のために
+2

あなたは、コンソールの外観を撮影したことがありますか?エラーメッセージが出ますか? – Nat

+1

また、誰かが悪用することを決めた場合に備えて、StackOverflowからAPIキーを削除することをお勧めします。 – Nat

+1

おそらく、適切な値でgeolocation.getCurrentPosition' 'へ' options'引数を供給することは、結果を改善に役立つかもしれない - も使用であるかもしれない 'watchPosition'メソッドを使用して、あまりにも – RamRaider

答えて

1

:@AwPa、@RamRaider、@HaythamROUISの助けを借りて解決

質問。 だから、問題は、サーバーがHTTPではなくHTTPSにあった(あなたがngrokを使用している場合)、あなたがする必要がある唯一のものであることを場所のHTTPSた:// URLの先頭でngrokホスト以来、HTTPとHTTPSの両方でHTTPSを使用するようにWebサーバーの設定を変更してください。

のhttps ngrokのリンク: ngrok

重要な注意: @RamRaiderあなたはURLのを使用してフェッチすべてにこれを行う、それはそれをやって、使用されるプロトコルをハードコーディングしない方が良いです、使用を言ったようにこの方法では、現在ウェブサイトで使用されているプロトコル(この場合はhttps)を使用します。

+1

プロトコルを使用せずに '

関連する問題