"You have included the Google Maps API multiple times" - how avoid the second call?

Question

I added in my page the script for the google map:

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

and in my js i call the pages:

    $(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);               
        }

I added $("#scriptmappa").remove(); (it doesnt work) because i have a problem in console like: You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

I want to remove every time i click on the function loadContact the map script, but it doesn't work. In particular:

I go to the map page, then i go to contact, after i go back in map (it works but the message in console appears) then i go in contact, then i go back and doesn't work anymore (again the message in console).

The site is: http://hyp.altervista.org/index.html. It's a work for school.

Answer 1

You may try this:

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