“您多次包含Google Maps API”-如何避免第二次调用？

Question

我在页面中添加了Google地图的脚本：

     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 Maps API。 这可能会导致意外错误。

我想在每次单击函数loadContact时删除地图脚本，但它不起作用。 尤其是：

我去到地图页面，然后去联系，回到地图后（它可以正常工作，但控制台中的消息出现了），然后我联系了，然后我又回到了，不再工作了（再次出现在安慰）。

该站点是： 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);
    }
}