Map not loading on front page

[theepoch]

I have inserted the Google Maps API and everything is working great for every event page when it comes to the map, however, on the calendar view the map begins to load and then gives me an error message…

“Oops! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.”

All of my events load up just fine below it so I am fairly sure it doesn’t have anything to do with the addresses I’ve entered.

We do have events on our calendar that are all over the world, so i don’t know if there is a setting i need to adjust to allow for a full world map view or not.

[Cliff]

Hi, Christopher.

You might see if you can spot any console errors at your site. (If needed, you may reference our KB article Using Google Chrome Developer Tools.)

Please provide a link where I can see the issue if you can’t resolve this yourself after looking at the console.

Thanks.

[theepoch]

There are indeed errors… I have unlocked the page so you can look at it. The URL is http://theepoch.org/live/events-calendar/

I’ve also copied and pasted the errors here…

JQMIGRATE: Migrate is installed, version 1.4.1
js:101 You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
$g @ js:101
(anonymous) @ js:137
google.maps.Load @ js:18
(anonymous) @ js:137
(anonymous) @ js:138
tribe-events.min.js?ver=4.4.1.1:1 [“TEC Debug: Tribe Events JS init, Init Timer started from tribe-events.js.”]
tribe-events.min.js?ver=4.4.1.1:1 TEC Debug: Browser and events settings information:
tribe-events.min.js?ver=4.4.1.1:1 [“TEC Debug: tribe-events.js successfully loaded”]
tribe-events.min.js?ver=4.4.1.1:1 [“TEC Debug: tribe-events-pro.js successfully loaded”]
tribe-events.min.js?ver=4.4.1.1:1 [“TEC Debug: bootstrapDatepicker was just initialized in “tribe-events-bar.js” on:”, a.fn.init[1]]
tribe-events.min.js?ver=4.4.1.1:1 [“TEC Debug: tribe-events-bar.js successfully loaded”]
tribe-events.min.js?ver=4.4.1.1:1 Tribe JS Init Timer: 34.604ms
tribe-events.min.js?ver=4.4.1.1:1 [“TEC Debug: tribe-events-ajax-maps.js successfully loaded”]
js:34 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
_.kb @ js:34
(anonymous) @ common.js:53
(anonymous) @ common.js:194
c @ common.js:49
(anonymous) @ AuthenticationService.Authenticate?1shttp%3A%2F%2Ftheepoch.org%2Flive%2Fevents-calendar%2F&callback…:1
util.js:210 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
iB.j @ util.js:210
(anonymous) @ js:137
(anonymous) @ js:47
(anonymous) @ js:39
(anonymous) @ js:47
_.G @ js:46
(anonymous) @ js:47
_.v @ js:31
yc @ js:47
(anonymous) @ js:137

It is a bit confusing because the API is loaded into the system and clearly working on the individual event pages, but on the front page it says i have multiple API’s and none at all…

Thank you,

[Cliff]

The console errors link to both https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error and https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Therefore, I’m guessing you didn’t enter a Google Maps API key at wp-admin > Events > Settings > APIs tab

Please follow https://theeventscalendar.com/knowledgebase/setting-up-your-google-maps-api-key/ and let me know how it goes for you.

[theepoch]

As mentioned in my initial post, I have already entered the API Key. I had to do this to fix the issue of the map not loading on the individual pages. It now works on individual pages but not the front page.

[Cliff]

In that case, I’ll point you back to your other console error:

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

Please disable any other map plugins or theme options that may be loading Google Maps and see if that causes it to work for you as expected.

Let me know what you find out.

[theepoch]

I found the culprit… thank you.

I am using X Theme and their included add-on Uber Menu. Buried in the settings of Uber Menu that automatically have the selected item for loading Google Maps API.

Thanks for you help.

[Cliff]

Thanks so much for that update!

I’m glad to hear it’s working for you now.

[Author]

Posts