4

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

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Hucho
  • 101
  • 2
  • 10

1 Answers1

1

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).

Rillus
  • 1,167
  • 9
  • 16