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

当我再次单击该按钮时，出现此错误。

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

如何防止 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 处，它将返回一个包含此脚本的 map

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

<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 map 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);
}