angular-google-maps-native icon indicating copy to clipboard operation
angular-google-maps-native copied to clipboard

Provide api key to map

Open hamzehdoostie opened this issue 8 years ago • 3 comments

At the time of this writing (or earlier) it seems google requires an api key when using the map.

https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

How do we pass the key to the map?

hamzehdoostie avatar May 02 '17 21:05 hamzehdoostie

Hi,

To pass the key to google map API, I used to override the gmLibraryProvider:configure url property.

Not sure if it's the good way or if there's another way to do this.

myApp.config(['gmLibraryProvider', function (gmLibraryProvider) {
	gmLibraryProvider.configure({
			language: 'en',
			url: 'https://maps.googleapis.com/maps/api/js?key=[YourAPiKey]&' // need to keep the `&` at end of string, if my memories are right
		});
}])

sire-sam avatar May 03 '17 06:05 sire-sam

I'll try it out, thanks for the suggestion

hamzehdoostie avatar May 03 '17 19:05 hamzehdoostie

Hi, go to angular-google-maps-native.js and find:

angular.module('GoogleMapsNative', [])

.provider('gmLibrary', function() {
    var deferred,
        loading = false,
        ignore = ['url', 'libraries'],
        options = {
            url: 'https://maps.googleapis.com/maps/api/js',
            v: 3,
            libraries: [],
            language: 'en',
            callback: '__mapLibraryLoaded'
        };

just add your API key :

.provider('gmLibrary', function() { var deferred, loading = false, ignore = ['url', 'libraries'], options = { url: 'https://maps.googleapis.com/maps/api/js', v: 3, libraries: [], language: 'en', callback: '__mapLibraryLoaded', key: "............................." };

VitaliyShkuratov avatar Sep 17 '17 15:09 VitaliyShkuratov