CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3geolocationmaps
Droidr
Droidr

Reputation: 63

To access Google maps api, when do I need to use the below scripts?

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>

and

<script async defer  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">   </script>

n the above scripts, the difference is API key. I have noticed code samples working with and without API KEY. It says Google Maps Javascript API 2 requires API key and Google Maps Javascript API 3 doesn't require the key. But in the scripts we are not mentioning which version of API it should access. So what makes the difference?

Upvotes: 1

Views: 4452

Answers (1)

geocodezip
geocodezip

Reputation: 161384

This script loads the experimental version of the Google Maps Javascript API without an API key:

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>

This script loads the experimental version of the Google Maps Javascript API asynchronously with an API key:

<script async defer  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">   </script>
  • The API key allows tracking of usage and allows you to purchase additional quota if you need it.

For async defer and the callback parameter, from the answer to this question: Page speed - any problems with simply using defer attribute?

async: You can prevent a script from blocking during load by using the async attribute on modern browsers

defer: The defer attribute indicates not to load at all until the page DOM has completely loaded. Defer implies async.

With the Google Maps API, you must use a callback parameter when loading the API asynchronously. This causes the api to use dynamic script insertion rather than document.write calls internally. You can specify an empty callback parameter as well.

Upvotes: 3

Related Questions