js関数をHTMLで読み込むことができません

私はちょうどウェブサイトを開発しようとしています。できればHTMLとjavascriptを別々にしておきたいと思います。私はマップ上にマーカーを置いて、座標をフォームの一部としてテキストボックスに置き、ユーザーがフォームを送信するときにそれらをデータベースに送るようにしています。コードはすべてHTML文書の中にあるときに機能しますが、それを分離しようとすると機能しません。地図はまだ表示され、マーカーを設定することはできますが、座標を取得することはできません。 HTML私はJSがjs関数をHTMLで読み込むことができません

<div id="map"> 
<div class="map" onclick="initMap();"> 
<script defer 
    src="https://maps.googleapis.com/maps/api/js?key==initMap"></script> 
    </div>

JSファイル

!function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 8, 
      center: {lat: 54.621277, lng: -6.692649 } 
     }); 
    google.maps.event.trigger(map, "resize"); 
     map.addListener('click', function(e) { 
      placeMarkerAndPanTo(e.latLng, map); 

     }); 
     } 

     !function placeMarkerAndPanTo(latLng, map) { 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map 

     }); 
     map.panTo(latLng); 
     document.getElementById("lat").value = latLng.lat(); 
     document.getElementById("lng").value = latLng.lng(); 

     }

を実行したいのdiv内

<script type="text/javascript" src="mapSubmitSighting.js"></script> 
<body onload="initMap()">

の頭で

私はと間違ったくさんあります知っていますこれは私がちょうどjavascriptを動作させる方法を理解することができれば、それはスタートになるでしょう。ありがとうございました！

出典

2016-11-14 champion_bake

あなたは 'initMap'を3回トリガーしていますか？ 'body onload =" initMap "、' onclick = "initMap（）"および '...＆callback = initMap' – putvande

あなたは正しいファイル名' mapSubmitSighting.js'を持っていますか？ –

なぜあなたはあなたの関数の前に "！"をつけていますか？ – acontell

コードのほとんどは実際に動作します。しかし、いくつかの変更をしました。サンプルコードでこれを行うことに気づいた初期マーカーの位置を追加しました。また、コードをリファクタリングして、必要なルーチンを再利用できるようにします。

下記をご確認ください。

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     #map { 
     height: 400px; 
     width: 50%; 
     } 
    </style> 
    <script src="mapSubmitSighting.js"></script> 
    </head> 
    <body>  
    <div id="map"></div>  
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD72DV80rL8PBw2BTTWOwHV3NPSQdx24D8&callback=initMap"></script> 

    <br/> 
    <div> 
     Latitude: <input type="text" id="lat"/><br/><br/> 
     Longitude: <input type="text" id="lng"/> 
    </div> 
    </body> 
</html>

function initMap() { 
    var initialLocation = {lat: 54.621277, lng: -6.692649 }; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: initialLocation 
    }); 

    var marker = setMarker(initialLocation, map); 
    setTextCoordinates(initialLocation.lat, initialLocation.lng); 

    google.maps.event.trigger(map, "resize"); 
    map.addListener('click', function(e) { 
    placeMarkerAndPanTo(e.latLng, map); 
    }); 
} 

function placeMarkerAndPanTo(latLng, map) { 
    var marker = setMarker(latLng, map); 

    map.panTo(latLng); 

    setTextCoordinates(latLng.lat(), latLng.lng()); 
} 

function setMarker(latLng, map){ 
    var marker = new google.maps.Marker({ 
    position: latLng, 
    map: map 
    }); 

    return marker; 
} 

function setTextCoordinates(lat, lng){ 
    document.getElementById("lat").value = lat; 
    document.getElementById("lng").value = lng; 
}

出力

これが役立つことを願っています！

出典

2016-11-14 20:38:10

ファイルを正しくリンクしていない可能性があります。

開発ツール（ChromeではF12、ページの一部を右クリックして[要素の検査]を選択）を開いて、コンソールでエラーを確認できます。

ほとんどの場合、404エラーがあります。ファイルのURLを見て、それが想定されている場所に合っていますか？あなたはフォルダがありませんか？あなたはそれをアップロードすることを忘れましたか？私たちがさらに助けることができるように私たちにお知らせください！

出典

2016-11-14 20:13:05

あなたはChromeでF12を意味しましたか？ – acontell

おっと！それを指摘してくれてありがとう！ –

助けてくれてありがとう、私は探してみますこれからもコンソールのエラー。 –

あなたも！あなたのjs関数の始めに。これはあなたのhtmlがjsファイルを読むことを妨げています。は次のようになります。 - >

function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 8,`enter code here`

出典

2016-11-14 20:24:58 SamsonTheBrave

私はそれらを削除しました、アドバイスありがとう！ –

js関数をHTMLで読み込むことができません

答えて

関連する問題