YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar lousyfool asked

[Tutorial] Google map doesn't display, error "See the Javascript console for technical details."

If you're using Widgetkit to display Google maps on your site, it could be that suddenly they don't display anymore but instead show an error:

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

This is not an error coming from your template/theme, or from Widgetkit or even your CMS. It's coming from Google as provider of the map service.

Update:
@michael.maas has just published a new tutorial on this subject with some valuable additional information; so, I've deleted the one here, and you may please follow this link here:
https://yootheme.com/support/question/100254

  • Widgetkit
  • General Question
  • Tutorial

Edited

46 Answers

13

Avatar michael.maass Support Online answered

Users of Widgetkit 2 please try and update to Widgetkit 2.7.5 which was released today:

# Changelog  

### 2.7.5  
 - Added featured articles ordering in Joomla content provider  
 - Fixed handling of multiple extrafields in K2 content provider  
 - Fixed Google API key error

Once Widgetkit is updated:

  • Go to Components > Widgetkit and click on "Options" at the top right.

  • Enter your Google Maps API into the field "Google Maps API key" and click "Save & Close" in the toolbar:

    Image

If you don't have such an API yet, go to https://console.developers.google.com/apis and create one.
Where in doubt about getting the API, please ask your site's webmaster for assistance.

Thank you

Edited

7

Avatar uusikylamrmedia answered

Hi!

I have had the same problem every one is having.

Here is the solution that worked for me:

When creating the Goolge Maps API, enable both the Google Maps Geolocation API and Google Maps JavaScript API

Please ensure your API has two referrers set in the Google Developers Console:

*.mydomain.com/*  
*mydomain.com/*

This worked for me and the Google map shows as usual.

Edited

1

Avatar yoosh answered

@lousyfool
much appreciated
.
also your help with the google map thing
.
i also run into this map thing ...
but i am not that well with the english tongue.
.
yes, you also do and did a nice job here.

thanks again !

1

Avatar nick.eng answered

I put the google map api key in this location and the error* went away:

1) Find this file:
administrator/components/com_widgetkit/assets/js/fields.js

2) Find this code:
t.onload=function(){google.load("maps","3",{other_params:"sensor=false&libraries=places"
and insert your key here:
t.onload=function(){google.load("maps","3",{other_params:"key=YOUR_GOOGLE_MAP_API_KEY&sensor=false&libraries=places"

Hope this help in the meantime.
.
.
.

*Error in Joomla widgetkit map control panel: map not showing
To show the map on the websie, this is what I did:
1) Find this file:
administrator/components/com_widgetkit/plugins/widgets/map/assets/maps.js

2) Find this code:
t.getScript("//maps.google.com/maps/api/js?sensor=true&callback=wkInitializeGoogleMapsApi")
and insert your key here:
t.getScript("//maps.google.com/maps/api/js?key=YOUR_GOOGLE_MAP_API_KEY&sensor=false&callback=wkInitializeGoogleMapsApi")

Edited

1

Avatar lousyfool answered

Original post here updated again, thanks to Widgetkit 2 update from Yootheme including API key field. :)

0

Avatar anthony.geselle answered

I am really sorry, but this does not work for me :-/

something about a duplicate key? normal google maps embedding does work...

Image

also: this is a very "clean" installation, no extra plugins (apart from Akeeba)

0

Avatar gianpietro.canevali answered

hi, i've tried your suggestion, but... i've got the same error (and also a situation as) anthony.geselle

:-(

hope YooTheme developers cand find a solution.

thanks!

GP Canevali

0

Avatar vogdux answered

tried both options (@michael.maass and @nick.eng ) - does not work..

0

Avatar josef.fenzl answered

i have the same problem at one of my webites.. But none of your solution-ideas worked for me :/

Did anyone successfully fix this problem?

0

Avatar akcreation answered

I am experiencing the same problems also. Would be great if yootheme devs could come up with a solution to this and a new version release of Widgetkit to cater for this problem asap.

Many thanks,

Keith

0

Avatar holger.wes answered

same problem:
Your text to link here...

edit: tried to include the code in the "Content" field of the map widget - no success (MissingKeyMapError)!
Can't see the script-tag in my source code of the page.

Edited

0

Avatar akcreation answered

apologies @lousyfool, my intention wasn't to be unhelpful (by not supplying info), I just wanted to add that I also saw the error so that yootheme support can see this is not an isolated incident.

I have created my own thread here = http://yootheme.com/support/question/99930 where I have explained in detail what I am doing, and what error messages I am getting

Many thanks,

Keith

0

Avatar steve99 answered

Placing the javascript with API key in the Additional Scripts area of the yootheme template or in the map widget Content area did not work for me, but adding the API key to the administrator/components/com_widgetkit/plugins/widgets/map/assets/maps.js file did work. So far it's the only solution working for me. I realize it's not the ideal solution due to having to re-apply the code after any Widgetkit update. But hopefully the Yootheme dev team will provide a permanent solution with a API key field on the map widget.

I still cannot see the map in the back-end admin of the widget. So I cannot make any map related modifications to the widget at this point.

Edited

0

Avatar alex.carvalho answered

I made the above procedure and does not work.

www.angioclam.com.br

0

Avatar karl.kaczmarczyk answered

Tried both fixes but no luck

Looking forward to a quick fix
thanks

0

Avatar silbernagl answered

Works for me.
Remember to add the Google API Key in the Widgetkit settings.

0

Avatar vogdux answered

@silbernagl And where these settings??

0

Avatar lousyfool answered

@vogdux:
How about reading the "tutorial" here at the top? :(

0

Avatar monatele answered

Hi

@michael.maass

I´ve had the same problem and was very happy to read your solution here. So I first tried to update my widgekit to 2.7.5
But after this I cann´t reach the frondend of my website anymore. There is no problem with the backend, but using the
frontend-web-adress I get this error message:

"Safarin kann die Seite nicht öffnen. Beim Öffnen von "www.60-na-und.party/index.php/" traten zu viele Umleitungen auf.
Dies ist möglich, wenn die geöffnete Seite an eine andere Seite umleitet, die wieder zurück auf die Ursprungsseite verweist."

Did I made any mistake by updating Widgekit?

Thanks for your help.

Michael

0

Avatar michael.maass Support Online answered

@monatele

So I first tried to update my widgekit to 2.7.5
But after this I cann´t reach the frondend of my website anymore.

I can see that Widgetkit 2.7.5 is installed on http://www.60-na-und.party and I don't habe any problems displaying the site:

Image

Please clear your browser's cache and try again.

Thank you

0

Avatar vogdux answered

Yoo You Are The Bes T
Thx

0

Avatar corrall answered

For me the map works okay but, when adding items to a custom map I cannot search for a location. I have to manually move the marker to the address

0

Avatar akcreation answered

Hi @corrall - I think you may be better posting that issue as a separate thread, as where this thread has now grown out from the original tutorial your issue may get lost among it all :)

0

Avatar alberto.misrachi answered

I have the error on the widgetkit 1 and can not find where to insert the api key

0

Avatar igibaar answered

Hello everybody
it does not work well with the Widgetkit version 2.7.5.
google api is also installed.
has someone an idea what else could be?

many thanks for the help

Joomla!-Version Joomla! 3.5.1 Stable [ Unicorn ] 05-April-2016 22:45 GMT

0

Avatar lousyfool answered

@igibaar:

it does not work well

is not a statement anyone could help with. Not to mention that it either works, or not at all.

As said in the tutorial (first post), if errors persist, look them up in your browser console, mostly they say what it's about, might even give you a link to Google where you can find more about it and probably also the solution.

Otherwise please open a new thread with all required details - again, as said above.

0

Avatar igibaar answered

I added the API Key from google and also the url is added as allowed.

But still the API access still does not work.

I get following erros in the developer console:

https://www.dropbox.com/s/nv6m39e5qmnq02l/Screenshot%202016-06-30%2015.55.59.png?dl=0

ReferrerNotAllowed error from API.

Any idea what is wrong?
Or any step by step guide what is to do on google console?

thx and best

Igi

Edited

0

Avatar lousyfool answered

@igibaar:

Empty the (optional) referer field in Google's dev console, then save. You'll get a little "warning triangle" next to your API key name, but ignore it.

And again, next time please open a new question for your specific "own" issues. Tutorial threads are not the place for it, for obvious reasons.

0

Avatar ilan.bompuis answered

Hi,

I have same problem here... API key is correct, added the API Key to administrator/widgekit but same issue.

I use on another site with other plugin (not widgetkit) and it's work fine...

Please fix this, Thanks.

Joomla 3.5.1, latest widgetkit version.

EDIT
After some test this not work :

xxx.com/ .xxx.com/
but this work :

http://xxx.com
http://xxx.com/*

Edited

0

Avatar monatele answered

@michael.maass, thanks for your fast answer 1 day ago. I was wondering, that you´ve been able to reach the side. So I tried to clear the browser-cache, but nothing changed. So I tried other browsers and found out, that only Safari has the problem. Since I was able to reach the site with other browsers, I first thought that the problem had to do in my local Safari installation. However, the phenomenon occurred on other computers with Safari browsers. After a long search I found the cause in the Joomla installation. The plugin "System - Language Filter" caused the error. After I had it turned off the website was back online with Safari.
Greetings from Berlin
Michael

0

Avatar reinder.herder answered

Hi,

Here the same problem.

My install: Joomla 3.5.1. || Yoo-gusto || ZOO || Zoo-filter/ZOOlander || Widgetkit 2

The Widgetkit map nor the map within ZOO (product catalogue) does work.

What happens?
I see the map just for a split second and then this message appear:

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

I entered an API key within the latest WK2 and within ZOO (elements).
Is this a correct one: ->>> Google Maps Directions API ??????
There are so many API keys.

Please help.....

Thanks.

Regards,
Reinder

Edited

0

Avatar lousyfool answered

@reinder.herder:

As said in the error and here in the tutorial: Open your browser console to see the exact error.
There will likely be a link to Google's dev pages, where the error is listed and explained. Follow that link, read the error explanations, then do as suggested there.

And as also stated here multiple times, please open a new question for your specific "own" issues. Tutorial threads are not the place for it, for obvious reasons.

Thanks.

Edited

0

Avatar leonel.soto answered

same problem
did an upgrade does not fix the problem

0

Avatar paul.rouffignac.45 answered

Domain name needs to be validated with google.
See tab "validate domain" when creating API key.
Then it works

Edited

0

Avatar jean.baptiste.maury.74 answered

Hello,

i've tried all solutions that you gave but still not working for me.

Widgetkit is up to date.
API key was re-genereted with the rights options and librarys activated.

At this time, the map does'nt appears even in the widgetkit admin screen...

HELP !....

0

Avatar totoweb answered

Hi,

I don't understand why existing maps still work on latest Joomla and widgetkit. Do we have to switch to the api or can we leave it as it is?

Regards,
Raoul

0

Avatar lousyfool answered

I don't understand why existing maps still work on latest Joomla and widgetkit. Do we have to switch to the api or can we leave it as it is?

Only Google could answer this. They are the ones setting the rules for the use of their map (and other) services, and they are the ones deciding when maps on which domain stop working without API key.
Presently, if your map is still working without API key, you'll probably find a warning in your browser console that the API key is missing. As usual, it's a warning and not an error, so for now it still works. As for other domains, at some point in the future the maps may stop working, and an error will then be shown in the console, too. Again, all at Google's discretion.

So, now that you know, it wouldn't hurt to get and use an API key to be prevent sudden errors... wouldn't you agree? ;)

0

Avatar considerlocal answered

I am having the same issue. I have upgraded. Why are we having to suddenly enter Google API keys? It was working fine before?

0

Avatar akcreation answered

@considerlocal this is because Google changed things their end and made it necessary to have this. It's actually not something that was under Yootheme's control :)

0

Avatar christopher.pennington.13 answered

I'm having the same problem. Google developer console shows requests but the map refuses to display. I've tried all the fixes listed in this forum.

Know someone who can answer? Share a link to this question via email or twitter.