angular google maps api key not getting passed

Question

I am trying to use Angular google maps and I went through the quick setup supplied by angular google maps

    .config(['$routeProvider','$locationProvider','uiGmapGoogleMapApiProvider,
        function($routeProvider,$locationProvider,uiGmapGoogleMapApiProvider) {
           // Other configurations
          uiGmapGoogleMapApiProvider.configure({
            key: ‘MY_GOOGLE_API_KEY’,
            v: ‘3.17’,
            libraries: 'weather,geometry,visualization'
          });
        }
    ]);

I setup an API key in Google API Console, but when I load the page i get an MissingKeyMapError.

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

I have the Google Javascript API enabled in the API console. I am at a loss as to what I am doing wrong. Any help would be greatly appreciated.

Answer 1

I solved the issue. Turns out I was loading the Google Maps API v3 twice. I was loading it in the provider

uiGmapGoogleMapApi.then(function(maps) {});

and loading the script tag

<script src="https://maps.googleapis.com/maps/api/js"></script>

Once I removed the script tag, It worked!

Thanks for everyones help.

Answer 2

Make sure that you used a key parameter with a valid API key. Follow this link for the steps on how to get the proper API Key for your project.

1. Go to the Google API Console.
2. Create or select a project.
3. Click Continue to enable the API and any related services.
4. On the Credentials page, get a Browser key (and set the API Credentials). Note: If you have an existing Browser key, you may use that key.
5. To prevent quota theft, secure your API key following these best practices.
6. (Optional) Enable billing. See Usage Limits for more information.

But based from this thread, the problem was because of a stray script tag which was including the google maps api before using this library. You can also check this related SO question.

Hope this helps!