javascriptangularjsgoogle-maps-api-3ng-map

Angular ng-map api key after google api changes in June 2018


I have been accessing the Google maps api by using ng-map in my Angular project without any problems. Since June 2018, Google has released new policies regarding their apis. So I have registered my project and got an Api-key now. My geocoding requests work properly now again. But unfortunately my map still is not working properly.

Screenshot of map

I implemented the tips of the ng-map ReadMe:

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="{{googleMapsUrl}}">
  <ng-map center="41,-87" zoom="3"></ng-map>
</div>

Unfortunately it does not help. In my Chrome console, I get this message:

Chrome console google maps api message

Any ideas would be great.

Thanks

Hucho


Solution

  • I ended up having to add the key to my index.html page in the end: <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?libraries=places&key=[API key]"></script>

    I know that kinda defeats the point of the lazy load, but it's the only thing I could get to work (without spending hours on it).