googlemaps javascriptが2回ロードされないようにする

Question

クリックしたときにボタンが表示され、このコード行を含むブートストラップモーダルにhtmlファイルを読み込みます。

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbePUCw9D44HfcTuiWyFQs_HbQ_6Qw-fA&signed_in=true&libraries=places&callback=initMap" 
    async defer></script> 

このエラーが発生しました。

このページにはGoogle Maps APIが複数回含まれています。予期しないエラーが発生する可能性があります。

どのようにgooglemapsスクリプトが2回読み込まれるのを防ぐには？ここで

私のコードは

<div class="modal fade" id="trackMapModal" role="dialog"></div> 

<button class='pull-right track' id="2"><strong>Track it!</strong></button> 
<script> 
$("#trackMapModal").appendTo("body"); 
$(".track").click(function(){ 
    var id = this.id; 
    $.ajax({ 
     type:"POST", 
     url:"<?=base_url("/track/viewMap")?>", 
     dataType:"html", 
     data: {id : id}, 
     success:function(res){ 
      $("#trackMapModal").html(res).modal("show"); 
     } 
    }) 
}); 
</script> 

とトラック/ viewMapそれはスクリプトがinitMap（）関数を実行するコールバックを持つことになります。このスクリプト

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbePUCw9D44HfcTuiWyFQs_HbQ_6Qw-fA&signed_in=true&libraries=places&callback=initMap" 
async defer></script> 

があるマップを返します/ですロードされたとき。

/トラック/ viewMapコードという名前のビューに

function viewMap(){ 
    $id = $this->input->post("id,true); 
    $data["id"]=$id; 
    $data["loc"]["dest"]=array("lat"=>51.1124587,"lng"=>42.1245457); 

    $this->load->view("/MAIN/mapModal",$data); 
} 

/MAIN/mapModal

<div id="map"></div> 
<script> 
function initMap() { 
    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer; 
    var marker2; 
    var map = new google.maps.Map(document.getElementById('map'),{ 
     center: {lat: <?=$loc["lat"]?>, lng: <?=$loc["lng"]?>},zoom:17 
    }); 
    marker2 = new google.maps.Marker({ 
     position: myLatlng, 
     map: map 
    }); 
    marker2.setMap(map); 

} 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbePUCw9D44HfcTuiWyFQs_HbQ_6Qw-fA&signed_in=true&libraries=places&callback=initMap" async defer></script> 

Answer 1

あなたはスクリプトタグにIDを与えると、それはだ場合はJavaScriptでそれを追加することができますまだそこにはない。また、GoogleマップAPIが既に読み込まれているかどうかを確認する必要があります。何かのように：

function initMap(){ 
    // your map set up scripts in here 
    ... 
} 

if(window.google && window.google.maps){ 
    // the map API is already be loaded (from a previous button click, maybe) 
    initMap(); 

} else if(!document.getElementById('google-map-script')) { 
    // the script tag is not present so add it to the DOM 
    var scriptTag = document.createElement('script'); 
    scriptTag .id = 'google-map-script'; 
    scriptTag .src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAbePUCw9D44HfcTuiWyFQs_HbQ_6Qw-fA&signed_in=true&libraries=places&callback=initMap'; 
    var head = document.getElementsByTagName('head')[0]; 
    head.appendChild(scriptTag); 
} 

Answer 2

私はモーダル外に地図をロードすることをお勧めします。

ロードマップ（あなたが好きな場所）：あなたのJavaScriptで<div class="modal-body">

<div class="modal-fade"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    </div> 
    <div class="modal-body" id='add'> 

    <div class="map"></div> 
and the rest of your modal body here... 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbePUCw9D44HfcTuiWyFQs_HbQ_6Qw-fA&signed_in=true&libraries=places&callback=initMap" 
async defer></script> 

下のモーダル内部

<div id="map" style="height:300px; width:895px;" align="center"> 

地図を表示：

map = new google.maps.Map(document.getElementById("map"),mapOptions); 
setTimeout(function(){ 
     $('.map').append($("#map").css("margin-top","0px").get(0)); 
     },500);