HTML/JavaScriptでジオロケーションを検索する

私はTheNewBostonのビデオを使用して、「場所を取得」ボタンを持つサイトをコード化し、ユーザーの場所のGoogleマップをプルアップしようとしています。しかし、私のサイトで「場所を取得」をクリックするたびに何も起こりません。私はコードを使って遊んでいましたが、一度表示される地図を手に入れることができましたが、その結果をもう一度得ることができず、どのように動作するのか分かりません。私は何が間違っているのか分からない？HTML/JavaScriptでジオロケーションを検索する

ここに私のコードです：は、いくつかのタグが/終了し、URLを微調整しているだけでなく、あなたが与えていたURLが働いていなかった閉鎖されていなかったとして、私はあなたのコード内のいくつかの変更を行った

<!DOCTYPE html> 
<html lang="en-US"> 

<head> 
    <title>Location Retriever</title> 
</head> 

<body> 
    <a href="#" id="get_location">Get Location</a> 
    <div> id="map"> 
    <iframe id="google_map" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com"> 
    </div> 

    <script> 

    var c = function(pos) { 
     var lat = pos.coords.latitude, 
     var long = pos.coords.longitude, 
     var coords = lat + ', ' + long; 

     document.getElementById('google_map').setAttribute('src','https://maps.google.com' + coords + '&z=60&output=embed'); 
    } 

    document.getElementById('get_location').onclick = function() { 
     navigator.geolocation.getCurrentPosition(c); 
     return false; 
    } 

    </script>

出典

2016-11-12 hoshicchi

クロムWEB-を使用しますブラウザ？そうであれば、Googleでは現在SSL対応のページでのみ場所を許可するので、http：//ではなくhttps：//を使用するようにしてください。 – Viney

より古いFirefoxを使用することもできます50は働くだろう – Viney

@Novice - ありがとう！私はFirefoxとSafariの両方でサイトを開設しましたが、残念ながら違いはまだありません。私は 'Get Location'をクリックしますが、何も起こりません。 – hoshicchi

あなたがIEでチェックする場合

<!DOCTYPE html> <html lang="en-US"> <head> <title>Location Retriever</title> </head> <body> <a href="#" id="get_location">Get Location</a> <div id="map"> <iframe id="google_map" width="600" height="450" frameborder="0" style="border:0px" allowfullscreen> </iframe> </div> <script> var c = function(pos) { var lat = pos.coords.latitude, long = pos.coords.longitude, coords = lat + ', ' + long; document.getElementById('google_map').setAttribute('src','https://maps.google.com/maps/@' + coords + '&z=60'); } document.getElementById('get_location').onclick = function() { navigator.geolocation.getCurrentPosition(c); return false; } </script> </body> </html>

：

iframeに「ページが表示されません」というエラーが表示され、マップに移動するリンクが表示されます。 Google Chromeで

：

は述べてコンソールにエラーがありますが、「それはSAMEORIGIN 'に『X-フレーム・オプション』を設定するためのフレームで『https://www.google.com/maps/@12.9732528,%2080.1971449&z=60』を表示することを拒否しました。」

出典

2016-11-12 03:37:11 GraveyardQueen

maps.google.comを使用することはできません。コンソールで取得エラーは、次のとおりです。Refused to display 'https://www.google.com/maps' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.私はあなたがに見たいかもしれないものだと思う。またあなたには、いくつかのマイナーコードの問題があるhttps://developers.google.com/maps/documentation/embed/

で、私はあなたが持っていたものに固定している：

<!DOCTYPE html> 
<html lang="en-US"> 

<head> 
<title>Location Retriever</title> 
</head> 

<body> 
    <a href="#" id="get_location">Get Location</a> 
    <div id="map"> 
    <iframe id="google_map" width="425" height="350" frameborder="0" 
    scrolling="no" marginheight="0" marginwidth="0" 
    src="https://maps.google.com"></iframe> 
    </div> 

    <script> 
    var c = function(pos) { 
     var lat = pos.coords.latitude, 
      long = pos.coords.longitude, 
      coords = lat + ', ' + long; 

    document.getElementById('google_map').src = 'https://maps.google.com' + coords + '&z=60&output=embed'; 

    } 

    document.getElementById('get_location').onclick = function() { 
     navigator.geolocation.getCurrentPosition(c); 
     return false; 
    } 
    </script> 
</body> 
</html>

出典

2016-11-12 03:37:46

HTML/JavaScriptでジオロケーションを検索する

答えて

関連する問題