How to use google-maps-api-v3 without adding script tag in html

Question

I automated my front-end development using bower, gulp and a browser. I am using lib called Gmaps to handle api calls on google maps. The problem is that I have to add a script tag to my html before importing gmaps.

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script> 

I tried, with no luck, to download js code from a script link and join my other js files, hoping to create all.min.js and avoid having to have more than one script tag on my site.

I only managed to make this work by adding a script tag in html. Is there anyway to use goi maps in concatenated files?

Answer 1

If you want to use API maps without additional <script> elements in the document, the answer is explicit: No the maps API not only used 1 script, it will introduce more scripts into the document.

But when the question is related to the number of scenarios that you must include manually, the answer is yes.

It is possible to load API cards with a callback asynchronously, the workflow will be as follows:

• Download the API asynchronously .
• create a function (the function that you defined as a callback in step # 1)
• Inside the callback:
  • initialize GMaps
  • run instructions that create a map through GMaps

---

 window.addEventListener('load',function(){ var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3&callback=initGmaps'; document.body.appendChild(script); }); function initGmaps(){ //paste here the contents of gmaps.js //........ //then use GMaps new GMaps({ div: '#map', lat: 0, lng: 0, zoom:1 }); } 

Demo: http://jsfiddle.net/doktormolle/cr1w32qn/

Answer 2

Although I cannot find a specific mention in the Google Maps documentation, I do not think that would be a good idea.

Requesting a javascript file is not a simple, static library. If you visit https://maps.google.com/maps/api/js , you will see that there is information contained in the version of the internal Google API, so if you linked this to your js site you may find that it will stop work if Google changes its internal API and / or version number.

Sensor = true parameter is also important if you request information about the user's geolocation in the browser, which will be lost if you run the script.