防止googlemaps 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>

并且在 /track/viewMap 它将返回一个有此脚本的地图

<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() 函数。

/track/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 添加它，如果它不存在的话。您还必须检查谷歌地图 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 id="map" style="height:300px; width:895px;" align="center">

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

在你的 javascript 中：

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