Google Maps API error “MissingKeyMapError” in PrestaShop

Oct 10, 2018

9277 Alex Simonchik

Google Maps API error “MissingKeyMapError” in PrestaShop

In case you are using Google Maps API on a localhost or your domain was not active prior to June 22nd, 2016, you’ll need to use the API Key for sending requests. Otherwise, you’ll get a gray error message instead of the map rendering. To fix this problem, please see the documentation to get a Google Maps Api key and add it to your application.

How to fix Google Maps API error 'MissingKeyMapError' in PrestaShop

Things happen and you can face the “MissingKeyMapError” error, instead of a Google Maps render block. You also can see the following Google maps API warning messages in the debug console: SensorNotRequired and NoApiKeys.
How to fix Google Maps API error "MissingKeyMapError" in PrestaShop

Then you should take care of conforming to new requirements for Google Maps use.

If you have any troubles with getting a key, then you can take a look at the detailed instruction.

At the same time, we will show, what you should do, to make Google Maps work with PrestaShop correctly. Here is the list of files that should be updated.

support_prestashop

PrestaShop Support & Maintenance

Take your online store to the next level with BelVG PrestaShop Support & Maintenance

Visit the page

Following to the Google requirements, your queries should look like:


Please note, that we are adding the &key=YOUR_API_KEY string. Eventually, we have to make the following corrections:

controllers/admin/AdminOrdersController.php
original:


and with the update:


controllers/front/StoresController.php
original:


should be:


themes/default-bootstrap/js/stores.js
original:

Andrey_Dubina

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey


with the fix:


administration/themes/default/template/controllers/orders/helpers/view/view.tpl
original:


updated:


 

The latest version of PrestaShop 1.6 has the ability to fill the Google Map API key at the admin panel. If you are still using the outdated version of Prestashop it’s a perfect time to get in touch with us and have it updated.

Link to prove that PrestaShop 1.6 has a patch for that:
https://github.com/PrestaShop/PrestaShop/blob/1.6.1.x/controllers/admin/AdminOrdersController.php#L341

You can fill in the Google Maps API key at the following path in the admin panel: Preferences -> General -> API key.

Fill in the Google Maps API key

Unfortunately, PrestaShop 1.7 still doesn’t have a patch, link to prove that:
https://github.com/PrestaShop/PrestaShop/blob/1.7.5.x/controllers/admin/AdminOrdersController.php#L336

By the way, you can apply the same logic as it was done for the 1.6 version by your own.

How to get the Google Api Key

Let’s take a look at the way how you can get the Google API key.

Go to: https://cloud.google.com/maps-platform/?apis=maps

Enable Google Maps Platform

Create a new project or pick the already existing one (we’ve created a new one):

Create a new project

Go to the project settings:

Check the project settings

Choose “Maps JavaScript API” and switch on the service:

Choose “Maps JavaScript API”

Go to the settings of the “Maps JavaScript API”:

Check the settings of the “Maps JavaScript API”:

This is the place where you can find your key:

Find your Google Maps Api Key

Copy the key and insert it into the PrestaShop admin:

Insert the key into the PrestaShop admin

You can restrict key usage if you need. The key can be used for any domain by default, so no restrictions there.

That’s it! Hope this helps. If you still have any problems our technical support is happy to solve them.

Check BelVG PrestaShop modules and addons at www.module-presta.com. Find dozens of useful modules and beautiful templates for your store.

development_prestashop

PrestaShop Development

Take your online store to the next level with BelVG PrestaShop Development

Visit the page
Andrey Dubina

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

16 Comments

  1. Hi, Julien! Glad you enjoyed my article.
    The reason why we don’t use overrides is because this is not a solution and the article is for learning purposes.

  2. Thanks for this article, it helped me fix the issue quickly instead of looking for where the API key was located.

    One thing though, why not do overrides?

  3. If You use Warehouse u need to edit also
    $apiUrl in customcontactpage.php in module customcontactpage.

  4. Hello, how would I implement the api into Magento 1.9.2? I have a google map that shows up with your missing-key-map-error and don’t know how to fix it. I was hoping that I could just add the api script in Magento, but I am not sure where or even if it’s possible. Thank you for a great post.

  5. Errors
    js?sensor=true:94 You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
    Ug @ js?sensor=true:94
    (anonymous) @ js?sensor=true:127
    google.maps.Load @ js?sensor=true:18
    (anonymous) @ js?sensor=true:127
    (anonymous) @ js?sensor=true:128
    js?sensor=true:34Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
    _.kb @ js?sensor=true:34
    (anonymous) @ common.js:50
    (anonymous) @ common.js:203
    c @ common.js:44
    (anonymous) @ AuthenticationService.Authenticate?1shttps%3A%2F%2Fkultivator-tornado.by%2Fstores&callback=_xdc_._h…:1
    util.js:212 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
    YA.j @ util.js:212
    (anonymous) @ js?sensor=true:127
    (anonymous) @ js?sensor=true:46
    (anonymous) @ js?sensor=true:43
    (anonymous) @ js?sensor=true:46
    _.F @ js?sensor=true:45
    (anonymous) @ js?sensor=true:46
    _.v @ js?sensor=true:31
    lc @ js?sensor=true:46
    (anonymous) @ js?sensor=true:127
    util.js:212 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
    YA.j @ util.js:212
    (anonymous) @ js?sensor=true:127
    (anonymous) @ js?sensor=true:46
    (anonymous) @ js?sensor=true:43
    (anonymous) @ js?sensor=true:46
    _.F @ js?sensor=true:45
    (anonymous) @ js?sensor=true:46
    _.v @ js?sensor=true:31
    lc @ js?sensor=true:46
    (anonymous) @ js?sensor=true:127

  6. @JS, The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google API Console.

    See API keys in the Google API Console. For more information, see Best practices for securely using API keys.

  7. Thanks man !

    Worked for me, but be carefull guys, there is a mistake @ “controllers/front/StoresController.php”, replace “&amp” by “&”

    Cheers.

  8. I followed your instructions too and still have the same error google maps api warning: noapikeys… How can i do to fix it ? Thanks

  9. Спасибо ВАМ ОГРОМНОЕ !!! Все заработало !!!! СПАСИБО !!!!

  10. I followed your instructions but still ticking me the same error google maps api warning: sensornotrequired

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *