{"id":11643,"date":"2018-10-10T12:51:20","date_gmt":"2018-10-10T10:51:20","guid":{"rendered":"http:\/\/blog.belvg.com\/?p=11643"},"modified":"2025-07-01T09:25:19","modified_gmt":"2025-07-01T07:25:19","slug":"how-to-fix-google-maps-api-error-missingkeymaperror-in-prestashop","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/how-to-fix-google-maps-api-error-missingkeymaperror-in-prestashop.html","title":{"rendered":"Google Maps API error MissingKeyMapError in PrestaShop"},"content":{"rendered":"\n

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<\/a> to get a Google Maps Api key and add it to your application.<\/p>\n

How to fix Google Maps API error \"MissingKeyMapError\" in Prestashop<\/p>\n

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.
\nHow to fix Google Maps API error \"MissingKeyMapError\" in Prestashop<\/p>\n

Then you should take care of conforming to new requirements for Google Maps use.<\/p>\n

If you have any troubles with getting a key, then you can take a look at the detailed instruction.<\/p>\n

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.<\/p>\n

<\/a>
\"support_prestashop\"

PrestaShop Support & Maintenance<\/h3>

Take your online store to the next level with BelVG PrestaShop Support & Maintenance<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n

Following to the Google requirements, your queries should look like:<\/p>\n

<script src=\"\/\/maps.googleapis.com\/maps\/api\/js?v=3.exp&sensor=false&key=YOUR_API_KEY\" async=\"\" defer=\"defer\" type=\"text\/javascript\"><\/script><\/pre>\n
Please note, that we are adding the &key=YOUR_API_KEY<\/strong><\/em> string. Eventually, we have to make the following corrections:<\/p>\n
controllers\/admin\/AdminOrdersController.php<\/strong><\/em>
\noriginal:<\/p>\n
$this->addJS('https:\/\/maps.googleapis.com\/maps\/api\/js?v=3.exp&sensor=false');<\/pre>\n
and with the update:<\/p>\n
$this->addJS('https:\/\/maps.googleapis.com\/maps\/api\/js?v=3.exp&sensor=false&key=YOUR_API_KEY');<\/pre>\n
controllers\/front\/StoresController.php<\/strong><\/em>
\noriginal:<\/p>\n
$this->addJS('http'.((Configuration::get('PS_SSL_ENABLED') && Configuration::get('PS_SSL_ENABLED_EVERYWHERE')) ? 's' : '').':\/\/maps.google.com\/maps\/api\/js?sensor=true&region='.substr($default_country->iso_code, 0, 2));<\/pre>\n
should be:<\/p>\n
$this->addJS('http'.((Configuration::get('PS_SSL_ENABLED') && Configuration::get('PS_SSL_ENABLED_EVERYWHERE')) ? 's' : '').':\/\/maps.google.com\/maps\/api\/js?sensor=true&key=YOUR_API_KEY&region='.substr($default_country->iso_code, 0, 2));<\/pre>\n
themes\/default-bootstrap\/js\/stores.js<\/strong><\/em>
\noriginal:<\/p>\n
var html = '<b>'+name+'<\/b><br\/>'+address+(has_store_picture === 1 ? '<br \/><br \/><img src=\"'+img_store_dir+parseInt(id_store)+'.jpg\" alt=\"\" \/>' : '')+other+'<br \/><a href=\"http:\/\/maps.google.com\/maps?saddr=&daddr='+latlng+'\" target=\"_blank\">'+translation_5+'<\\\/a>';<\/pre>\n
with the fix:<\/p>\n
var html = '<b>'+name+'<\/b><br\/>'+address+(has_store_picture === 1 ? '<br \/><br \/><img src=\"'+img_store_dir+parseInt(id_store)+'.jpg\" alt=\"\" \/>' : '')+other+'<br \/><a href=\"http:\/\/maps.google.com\/maps?saddr=&key=YOUR_API_KEY&daddr='+latlng+'\" target=\"_blank\">'+translation_5+'<\\\/a>';<\/pre>\n
administration\/themes\/default\/template\/controllers\/orders\/helpers\/view\/view.tpl<\/strong><\/em>
\noriginal:<\/p>\n
url: 'http:\/\/maps.google.com?q={$addresses.delivery->address1|urlencode},{$addresses.delivery->postcode|urlencode},{$addresses.delivery->city|urlencode}{if ($addresses.delivery->id_state)},{$addresses.deliveryState->name|urlencode}{\/if},{$addresses.delivery->country|urlencode}'<\/pre>\n
updated:<\/p>\n
url: 'http:\/\/maps.google.com?key=YOUR_API_KEY&q={$addresses.delivery->address1|urlencode},{$addresses.delivery->postcode|urlencode},{$addresses.delivery->city|urlencode}{if ($addresses.delivery->id_state)},{$addresses.deliveryState->name|urlencode}{\/if},{$addresses.delivery->country|urlencode}'<\/pre>\n
 <\/p>\n
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<\/a> and have it updated.<\/span><\/p>\n
Link to prove that PrestaShop 1.6 has a patch for that:
\nhttps:\/\/github.com\/PrestaShop\/PrestaShop\/blob\/1.6.1.x\/controllers\/admin\/AdminOrdersController.php#L341<\/p>\n
You can fill in the Google Maps API key at the following path in the admin panel: Preferences -> General -> API key.<\/p>\n
\"1<\/p>\n
Unfortunately, PrestaShop 1.7 still doesn’t have a patch, link to prove that:
\nhttps:\/\/github.com\/PrestaShop\/PrestaShop\/blob\/1.7.5.x\/controllers\/admin\/AdminOrdersController.php#L336<\/span><\/p>\n
By the way, you can apply the same logic as it was done for the 1.6 version by your own.<\/span><\/p>\n
How to get the Google <\/span><\/strong>Api<\/span> Key<\/span><\/strong><\/h2>\n
Let’s take a look at the way how you can get the Google API key.<\/span><\/p>\n
Go to: <\/span>https:\/\/cloud.google.com\/maps-platform\/?apis=maps<\/span><\/p>\n
\"2<\/p>\n
Create a new project or pick the already existing one (we’ve created a new one):<\/span><\/p>\n
\"3<\/p>\n
Go to the project settings:<\/span><\/p>\n
\"4<\/p>\n
Choose “Maps JavaScript API” and switch on the service:<\/span><\/p>\n
\"Choose<\/p>\n
Go to the settings of the “Maps JavaScript API”:<\/span><\/p>\n
\"6<\/p>\n
This is the place where you can find your key:<\/span><\/p>\n
\"7<\/p>\n
Copy the key and insert it into the PrestaShop admin:<\/p>\n
\"8<\/p>\n
You can restrict key usage if you need. The key can be used for any domain by default, so no restrictions there.<\/span><\/p>\n
That’s it! Hope this helps. If you still have any problems our technical support<\/a> is happy to solve them.<\/p>\n
Check out the BelVG PrestaShop modules<\/a>! Find useful modules for your store.<\/p>\n
<\/a>
\"development_prestashop\"
PrestaShop Development<\/h3>
Take your online store to the next level with BelVG PrestaShop Development<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"How to solve Google Maps Api error","protected":false},"author":12,"featured_media":16831,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[15,520,523,522],"tags":[],"class_list":["post-11643","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-prestashop","category-prestashop-custom-development","category-prestashop-seo","category-prestashop-speed-optimization","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t