google is not defined or Google Maps API error: MissingKeyMapError

Question

I'm writing component with ng-map inside and I'm following this tutorial.

<div class="content-pane" map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{$ctrl.googleMapsUrl}}">
    <ng-map class="content-pane" center="41,-87" zoom="5"> 
    ...
    </ng-map>
</div>

In my controller I'm doing some pretty ordinary stuff like

var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < this.positions.length; i++) {
    var latlng = new google.maps.LatLng(this.positions[i][0], this.positions[i][1]);
    bounds.extend(latlng);
}

and I'm getting google is not defined error

angular.js:13708 ReferenceError: google is not defined
    at new app.component.controller (map.component.js:13)
    at Object.invoke (angular.js:4709)
    at $controllerInit (angular.js:10234)
    at nodeLinkFn (angular.js:9147)
    at angular.js:9553
    at processQueue (angular.js:16170)
    at angular.js:16186
    at Scope.$eval (angular.js:17444)
    at Scope.$digest (angular.js:17257)
    at Scope.$apply (angular.js:17552)

I've googled around and found this bug report. My issue looks pretty similar. And Allen propose to use the same example I'm using as a tutorial to fix the issue. But I don't understand how this suppose to help me to resolve the issue taking into consideration that example has script-tags-for-development.js which eagerly loads needed script.

document.write([
  '<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>',
...

When I add this script to my html head the issue go away but another issue arise: 'Google Maps API error: MissingKeyMapError'. And this is logical, because I don't want to hardcode apy key in my html head, I want it to be configurable in my angular application.

To solve 'missing apy key' error there is a tutorial which propose to use lazy-load directive and I got exactly to the point where I've started.

 If you need to pass in an API key to the javascript, you can set a scope variable in your controller (e.g. $scope.googleMapsUrl="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE";). 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="https://maps.google.com/maps/api/js"
  map-lazy-load-params="">
  <ng-map center="41,-87" zoom="3"></ng-map>
</div>

So I would put my question this way: haw does provided official nd-map tutorial/examples work without google maps api key? And how could I overcome 'google not found' error when I want to use lazy-load directive not to hardcode api key in my html head?

Answer 1

My problem was the async attribute on the script:

<script src="https://maps.googleapis.com/maps/api/js?key=xxx" async defer></script>

After removing async , everything works as it should. But beware, that the script is now blocking when loading:

The async attribute lets the browser render the rest of your website while the Maps JavaScript API loads. When the API is ready, it will call the function specified using the callback parameter.

See https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#Loading_the_Maps_API

Also and recommended, you can use the lazy-loading of ngMap:

<div map-lazy-load="https://maps.google.com/maps/api/js"
     map-lazy-load-params="{{googleMapsUrl}}">
  <ng-map center="41,-87" zoom="3"></ng-map>
</div>

https://github.com/allenhwkim/angularjs-google-maps#lazy-loading-of-google-maps-javascript