CODEWITHSUNDEEP
angularjsgoogle-maps
Bibhudatta Nayak
Bibhudatta Nayak

Reputation: 3

How to use google map API_KEY in angular-google-maps 2.2.1

Recently I am working on a mobile app project which has been developed back in 2016. Around 4500 users are currently using it. It was developed using AngularJS (v 1.7.8) and IONIC (V1.1.1). We have to stick with these older version for now.

It has a google map feature.
It is done by first calling "geocode" funtionality of google map java script API and then we use "ui-gmap-google-map" directive from "angular-google-maps 2.2.1 to render the map.

Now it started giving error. We have to use google map API_KEY now.

To get the geocode the app is making a call to this google map API. https://maps.google.com/maps/api/geocode/json?address= Now we have to append an API_KEY in the URL to make it work.

After getting geocode (lat and lng), we used to pass it to "ui-gmap-google-map" angular directive ("center" attribute) in the view to render the map. I am guessing this "ui-gmap-google-map" is internally making calls to google map service and passing the geocode and then render the map. The map which is being displaying is covered with gray color and water mark "For development purpose only".

Now here the question is, how I can pass the same API_KEY to "ui-gmap-google-map" ?

Please help or show me some direction.

Thanks a lot.

Bibhudatta

Upvotes: 0

Views: 494

Answers (1)

Vincenzo Ninni
Vincenzo Ninni

Reputation: 195

You should switch to angularjs-google-maps

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.

Upvotes: 0

Related Questions