Angular Google maps confused (doc) loading maps - angularjs

Question

I am new in Angular and Maps, but however would like to try the Angular Google Maps.
When reading the quickstart I am confused at the 3rd point
:
Include the Google Maps API v3, via one of two ways:
Google Maps SDK Async Loader New in v2.0.0
Google indicates using
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap">
The quiqkstart proposes also the second option:
Directly load into your HTML page. Example:
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
If the second option is clear, the first confuses me.
Is the difference between first and second option just adding async defer to the script tag?
Where the API key should be used? in the config of Angular Module or in the google maps script?
PS.
The code sample the dev team gave as example didn't clarify either this question, because they didn't use any key at all for the maps initialization...

Answer 1

In the first case you provide a callback (initMap), which will get called, as soon as the map-script is loaded asyncronous. You can configure the map programmatically.
In the second case the script will be loaded and can be used by angular-google-maps later. You have to configure the map over the url.

Answer 2

The difference is with the API key, your account can be bound to additional libraries from within the google console. You require an API key and additional libraries to your liking (directions, geocoding, e...) for certain domains.
The call to your script resource can be kept simple.
The libraries have to be managed within the console.
Without an API key you can load gm with additional libraries as well. But your domain is limited to an amount of request / day.
//maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&callback=asyncGoogleMaps
If you simply use a script tag in the head section of your page, there's almost no issue in loading the library.
But if you work asynchronously, you'll have to create a global function to map the script initialisation. Else it won't work since the script can't write to the DOM.
If you need to pass in an API key to the javascript, you can set a scope variable in your controller
$scope.googleMapsUrl="http://maps.google.com/maps/api/js?v=3.20&client=XXXXenter-api-keyXXXX";
This can be set from a constant value in your app to standardise the API key to pass to google for multiple controllers.
<div map-lazy-load="http://maps.google.com/maps/api/js"
map-lazy-load-params="{{googleMapsUrl}}">
<map center="41,-87" zoom="3"></map>
</div>
As read on angular-js-googlemaps.