javascript - "You have included the Google Maps API multiple times"- 如何避免第二次调用？

Question

我在我的页面中添加了谷歌地图的脚本:

     function initialize() {
            var mapOptions = {
              zoom: 16,
              center: new google.maps.LatLng(45.711802, -121.522657)
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

          var infowindow = new google.maps.InfoWindow();

      var marker = new google.maps.Marker({
        map: map,
        // Define the place with a location, and a query string.
        place: {
          location: {lat: 45.711802, lng: -121.522657},
          query: 'Big Gym, Oregon'

        },
        // Attributions help users find your site again.
        attribution: {
          source: 'Google Maps JavaScript API',
          webUrl: 'https://developers.google.com/maps/'
        }
      });

      // Construct a new InfoWindow.
      var infowindow = new google.maps.InfoWindow({
        content: 'Big Gym'
      });

      // Opens the InfoWindow when marker is clicked.
      marker.addListener('click', function() {
        infowindow.open(map, marker);
      });



          }



    function loadScript() {
    if(google) return; // if script is loaded earlier then google will not be undefined.
        var script = document.createElement('script');
        script.setAttribute('id', 'scriptmappa');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize';
        document.body.appendChild(script);
    }

在我的js中我调用页面:

    $(document).ready(ready);

    function ready(){
          loadHome();
          $(".navbar-brand#home1").on("click",loadHome);
          $(".home").on("click",loadHome);
          $("#loc").on("click", loadLocation);
          $("#ins").on("click", loadInstructors);
          $("#cat").on("click",loadCategories);
          $("#level").on("click",loadbyLevel);
          $("#alpha").on("click",loadAlphabetical);

    } 
        function loadLocation(){
                $( ".scorrimentoslide" ).fadeOut( "slow" );
                $( ".banner" ).fadeOut( "slow" );
                window.onload = loadScript(); //Carica la mappa

                $(".contenitoredestra").html(
                    "<div class=\"headerline\">Location & Overall Scheduling</div> "+

                        "<div id=\"map-canvas\"></div>"+

                        "<div class=\"contenitore-dinamico\">"+
                        "<div class=\"riquadroIndirizzo\"><b>Big Gym</b><br>1020 Waso St Hood River,<br>MI 97031</div>"+

                        "<table id=\"table\">"+
                        "  <tr>"+
                        "    <th colspan=\"2\">Overall Schedule</th>"+
                        "  </tr>"+
                        "  <tr>"+
                        "    <td>Mon - Fri</td>"+
                        "    <td>6:00 am - 11:00 pm</td>"+
                        "  </tr>"+
                        "  <tr class=\"alt\">"+
                        "    <td>Sat & Sun</td>"+
                        "    <td>7:00 am - 7:00 pm</td>"+
                        "  </tr>"+
                        "</table></div><br><br><br><br>"+

                        "<div class=\"barrainbasso\"><div class=\"link\"><a href=\"#location\">Where</a></div><div class=\"link\"><a href=\"#contact\" id=\"contact\">Contact</a></div></div>");
                $(document).on("click", "#contact", loadContact);
                $(".barrainbasso").hide();
                $(".barrainbasso").fadeIn(1000);

        }

        function loadContact(){
            if(scriptmappa != undefined) {
          $("#scriptmappa").remove();
                console.log("ok");
        } 
            $(document).on("click", "#back", loadLocation);
            $(".contenitoredestra").html(
                    "<div class=\"headerline\"><a href=\"#back\" id=\"back\">Location & Overall Scheduling </a><<<br> Contact us</div> "+

                        "<div class=\"contenitore-dinamico\">"+
                        "<div class=\"riquadroIndirizzo\"><b>Big Gym</b><br>1020 Waso St Hood River,<br>MI 97031</div>"+

                        "<table id=\"table\">"+
                        "  <tr>"+
                        "    <th colspan=\"2\">Overall Schedule</th>"+
                        "  </tr>"+
                        "  <tr>"+
                        "    <td>Mon - Fri</td>"+
                        "    <td>6:00 am - 11:00 pm</td>"+
                        "  </tr>"+
                        "  <tr class=\"alt\">"+
                        "    <td>Sat & Sun</td>"+
                        "    <td>7:00 am - 7:00 pm</td>"+
                        "  </tr>"+
                        "</table></div><br><br><br><br>"+

                        "<div class=\"barrainbasso\"><div class=\"link\"><a href=\"#location\">Where</a></div><div class=\"link\"><b>Contact</b></div></div>");
                $(".barrainbasso").fadeIn(1000);               
        }

我添加了 $("#scriptmappa").remove(); (它不起作用)因为我在控制台中遇到问题，例如:您已在此页面上多次包含 Google map API。这可能会导致意外错误。

我想在每次点击函数loadContact时删除 map 脚本，但它不起作用。特别是:

我进入 map 页面，然后我去联系，在我返回 map 后(它可以工作，但控制台中出现消息)，然后我去联系，然后我返回并且不再工作(再次)控制台中的消息)。

网站是:http://hyp.altervista.org/index.html 。这是一份学校作业。

Answer 1

你可以试试这个:

 function loadScript() {
    try {
        if (google) {
            return;
        }
    } catch (e) {
        console.log("in catch")
        var script = document.createElement('script');
        script.setAttribute('id', 'scriptmappa');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize';
        document.body.appendChild(script);
    }
}