CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3autoload
Praveen Kumar
Praveen Kumar

Reputation: 65

How to solve the google map multiple times included Issue while using Auto-Loading feature

I am in need of clarification about the issue occurred in loading Google maps api.

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

This is occurred while I'm trying to auto load the API.

The following is the code were used. Let me know where it went wrong.

Thanks in advance....!!!

index.html:

<script type="text/javascript" src="mapSrc.js"></script>
<script>
  function callSrc()
  {
     initMap();
  }
</script>

mapSrc.js:

function initMap()
{
    loadAPI(); 
}

function loadAPI()
{

    var script = document.createElement("script");
    script.src = 'https://www.google.com/jsapi?autoload={"modules"[{"name":"maps","version":"3.exp","other_params":"sensor=false"}]}&callback=loadAPI2';    
    script.type = "text/javascript";    
    document.getElementsByTagName("head")[0].appendChild(script);
}

function loadAPI2()
{       
   var script = document.createElement("script");
   script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=loadAPI3";
   script.type = "text/javascript";
   document.getElementsByTagName("head")[0].appendChild(script);      
}

function loadAPI3() {

    google.load('visualization', '1', {
       'packages': ['table'],
       'callback':'loaded'
    });
 }

function loaded()
{
    console.log("Google map successfully loaded...");
}

Upvotes: 0

Views: 1343

Answers (1)

geocodezip
geocodezip

Reputation: 161334

loadAPI and loadAPI2 both load the Google Maps Javascript API v3. You should only do one of those.

You need the jsapi, remove the other. Although if you read the documentation on the autoloading, you should be able to do it all in a single operation.

Note that the sensor parameter is no longer required

Upvotes: 1

Related Questions