Fixing Divi Google Maps module API issues
In this Divi Fix Tip we look at fixing API issues which may occur in the Divi Google Maps module and how to actually get and use a Google API key.
In this Divi Fix Tip we look at fixing API issues which may occur in the Divi Google Maps module and how to actually get and use a Google API key.
Don't miss out - this pre-launch offer is closing soon! Join our mailing list to receive a generous 25% Early Bird Discount on the full Divi Course when we launch shortly. No obligation, just a chance to save off the full course price!
Hi, would be helpful if at the start of the video or in the description it shows which topics / issues will be dealt with. Had to watch the full 10 minutes to find no solution (did both steps re API key in Google developers, but error message still pops up).
Hi Muriel
Sorry that it didn’t work for you, not sure why that is. Are you having the same error message as the one in the video (as the video is specific to that) or another one?
Re describing the video, I did detail at the beginning that it covers adding Javascript API key, geolocation error, restricting API key, which is exactly what it covers. Not sure what else I could say here to be more thorough, as I don’t know of other errors people may be having with that module at this time, but I’ll bear your comments in mind, thank you.
The last bit with the geolocation and geocoding solved it for me. Cheers.
Good to hear, thanks.
That did it for me as well.
Thanks!
Don’t forget to enable the use of the key for Webpage Maps in the API’s project library page.
Hi, all worked after I turned off my adblocker extension. Hope that helps…
I did register a new API key on a different email address and it did work. 😉
When using the divi map with Cloudflare it stops working. Do you know if there is a solution to this?
Hi Matteo
Have you tried temporarily disabling Cloudflare in its dashboard, under ‘quick actions’ – choose development mode. Then clear your cache, try the map again and see does it work? Also checking you have your google maps API key entered and saved in the divi dashboard, under theme options of course, before doing this.
Hey, I’ve tried to add an API key in Divi several times, but it seems that Divi doesn’t save it and the field is empty every time I refresh. Do you have any idea how I can solve this?
Hi Augusta
You need to make sure you’re entering the API key in the dashboard under Divi>Theme Options>General>Google API key, and save it there first – NOT in the API key field in the Maps module. If it’s not put in here first, then as you’ve experienced, trying to enter it in the maps module won’t have any effect. Hope this works for you 🙂
Hello, I resolved the problem by re-generating the API key in Googles’s console.
Thank you and blessings.
Enabling Geocoding and Geolocation worked for me too, thank you very much!
Excellent – thank you – got me sorted and up and running! just had to remember to take out the pin that loaded with the template! Geocoding and location, did it for me! thanks a mill
Great Brendan, thanks
Hi I can’t hear your video. I have adjusted the volume. I have reloaded the page and tried a different browser. And I have checked my speakers are working using a YouTube video.
Hi Heather, thanks for your comment. The audio doesn’t start until 14/15 seconds in (the part before that has no sound as it’s just an intro). Can you forward to that section and check if you can hear it then please? Thank you!
I have everything set up where it appears it should work, however I am receiving the “OVER_QUERY_LIMIT” error message which doesn’t make sense since it should give me 25,000 queries before needing to pay for it. I have the API key in the Divi options, I have enabled geocoding, geolocation and webpage API on the Google end, and everything looks like it should work.
Any ideas? Thanks!
Hi Kepa, I’m not sure but the only thing occurs is whether your key has been hacked/is being used in another location/site (without your knowledge) which might be someone trying to use up your allowance for free?
If you look at 6:09 in the video, I talk about that, and how you can lock down the security of the key to prevent that, in your API Console, under Credentials, Key Restriction. I hope that’s of some help.
Thank you so much for your help. Activating the Geocoding was the only parameter I missed. It’s incredible how Google made the UI so much cluttered.
Btw, I like your accent. I think that Sean Connery spoke like you when he played its first James Bond. No kidding.
English is nosh my firsh language 🙂 I am Belgian, francophone side of the country. I love languages and cultures worldwide. They are such treasures before being barriers.
Hi Irep
Glad that was helpful, that’s great to hear. Yes, it’s a horribly cluttered interface on there! My accent is Irish, and Sean Connery’s is Scottish, but they can both sound a bit similar, definitely! Probably like people sometimes mix up Belgian and French! Anyway..just glad you could understand what I was saying 🙂 All the best.
Thank you for the help. Still get the following error message “REQUEST_DENIED”. Any idea what I could do more? Thank you in advance.
Hi Martin
Have you tried generating another/different API key?
I also get this error message and i already tried two different API keys…
never mind >.< did not watch the video until the end haha THANK YOU!
Enabling the Geocoding worked for me. I’ve been searching a long time for this solution!
Thanks 🙂
Thank you. This was helpful. It is irritating that the Google Maps API doesn’t automatically include the GEO Location options. I went in circles on this until i finally started enabling each of the additional API options. I turned almost all of them on. Then… like magic. It finally worked. Eeek. Thank you again for that tip. I was overlooking it and going a bit mental.
The problem I see and I have is that it (Google) requires a billing account and all I want to do is render a map.
Thank you SO much for this step by step…well done & problem solved.
Thank you Divi Course team! I was getting an error message:
An embedded page on this page says Geocode was not successful for the following reason: REQUEST_DENIED
After I watched this video I realized I didn’t have the Geo option enabled.
I set up a new API key like the video suggested. Within my front end builder in Divi theme it looks great and there is no error showing! But when you go the the website it says “This page can’t load google maps correctly. Do you know this website? There is a dark overlay over the map and it says “For development purposed only”
How do I remove that? It looks perfect within the front end divi builder but when you visit the site it shows those errors.
Hi Ben
The error most likely here is because you don’t have payment setup with Google for using the maps API. They’ve started charging for that, but include a fairly generous free amount of usage (200 USD a month) which many sites won’t go over unless they had large amounts of traffic – but you need to keep a payment method on file with them now. This means, you need to be careful to use a separate google account/payment method to your own for client sites (which you probably would anyway, but just to flag!), as you don’t want to end up paying for their usage. Alternatively, you can set a quota on usage to keep within budget, but in any event, labelling your keys in such a way as you’re clear which projects are for which site, and/or using different google accounts as appropriate (getting your client to setup an a/c and keep their card details on their site) is sensible.
See https://cloud.google.com/maps-platform/pricing for more info
Thanks for your tutorial which I discovered when I was trying to fix this issue on several sites that had Google APIs already but from too long ago. I wanted to share that I’ve found a simple work-around to the crazy and changing Google API approach! After much consternation and fussing, I’ve removed the Divi map module and simply used a full-width module with the embed code for the map. Works a treat and no more Google hurdles. Hope that helps someone else.
PS – I’ve now realized while my work-around is excellent for a single address, I haven’t found an effective way to put multiple pins on the map with this approach. Open to suggestions.
Thank you so much… I was having quite a headache because thought that by creating the initial credentials would be enough, and didn’t know we have to manually turn on those API in the developer console.
Thanks – enabling gelocation/geocoding apis worked
I seem to have a problem within the module: When i search an adress to center the map, no search results are shown. Even if I just enter a town (Amsterdam). I followed all the steps in the video. Am I overlooking something?
Hi, have you enabled billing in your google maps account? Now that google are insisting on having payment method on file I’ve seen a lot of problems which are simply resolved from adding your billing details. They say this pretty clearly now that in order to use the Javascript API you have to have a billing account aswell as the Javascript API enabled (this is done in the console). Most small to medium sites will never have a charge for maps as the free amount of daily impressions ($200 monthly credits) included by google will cover them, but anyway that’s a probable issue – particularly as on your site it’s reporting a javascript api issue. So sadly whipping out the credit card may be required to fix it (actually make sure it’s your clients card if you’re working for someone or you could potentially end up paying for their sites google map impressions if they had very large amounts of traffic)
Check/calculate pricing here:
https://cloud.google.com/maps-platform/pricing
Note that embedding a google map (rather than via API) remains free currently (that can change of course!) but you don’t have as much functionality/options as with the API but it may serve your purposes.
You will also need to maybe wait 10/15 minutes after adding and saving billing and clear your cache if the map still has an issue as the updated status can take a while to filter through. Can’t guarantee this will fix it, but it’s where I’d start. Hope this helps.
For more see: https://developers.google.com/maps/documentation/javascript/overview?_ga=2.189965731.960713941.1602678015-1424446660.1596555122