防止谷歌地圖的JavaScript加載兩次

Question

我有一個按鈕，當點擊會做ajax和加載一個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腳本獲取兩次？

這裏是我的代碼

<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> 

而在/音軌/視圖地圖它會返回一個地圖，有這個腳本

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

該腳本將不得不將運行initMap callback（）函數何時加載。

/音軌/視圖地圖代碼

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添加它，如果它是還沒有。你還必須檢查谷歌地圖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

我建議在模態外加載地圖。

加載地圖（無論你想）：下<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"> 

顯示地圖在你的JavaScript：

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