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

Avatar michael.maass Support Online asked

[Tutorial] Widgetkit Maps and the Googlemaps API key

Google provides the Googlemaps service for free, but — probably due to a change of the policy — this service may require a valid key for the site displaying and using the maps.

If there is no such key, the maps might not be displayed. Instead you will see an error message.

Did you create and publish a Widgetkit Map and then don't see a map but a warning like the following?

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

In this case there will probably be one or more error messages in the "console" of your browser.
(See "Chrome > Devtools > Using the Console or "Firefox Developer Tools > Web Console" to learn more.)

If there is a MissingKeyMapError, a InvalidKeyMapError, RefererNotAllowedMapError, or another one of the "Google Maps JavaScript API Error Codes" in your browser's console there is a problem with the Googlemaps API. Either you did not yet insert the API key into the Widgetkit settings, or the key it is invalid/wrong, or the API is not properly configured or something else is wrong with it.

(See "Google Maps JavaScript API Error Codes for Developers" for details about the error messages and warnings.)

  • If you don't have a Googlemaps API yet, go to https://console.developers.google.com/apis and create one.

    If you don't have such an account yet and feel unsure about how to create it, please ask your site's webmaster for assistance.

  • Once you have obtained a Googlemaps API key, insert it into the Widgetkit settings field "Google Maps API key".

    • Widgetkit 2.5.7 or higher:

      In the Joomla backend go to Components > Widgetkit and click on "Options" at the top right.

      Image

      In the WordPress backend go to Settings > Widgetkit.

      Image

    • Widgetkit 1.5.9 or higher:

      In the Joomla backend go to Components > Widgetkit and click on the tab "Settings":

      Image

      In the WordPress click on Widgetkit in the dashboard and then on the tab "Settings":

      Image

    Important: Should your screens look different and lack the field for the API key, you are most probably using outdated software. Update your Widgetkit 1 or Widgetkit 2 to their respective current version. Versions before 1.5.9 or 2.7.5 just do not have this field. Google only recently changed their policy. In the time before the new versions with the API key field were released, Googlemaps did not necessarily require the API key, so there was no field.

    Make sure to save the changes.

  • If you have and API key and it is entered in the Widgetkit settings, but you still get errors related to the API:

    • When creating/configuring the API key make sure to enable at least the "Google Maps JavaScript API" and the "Google Maps Geocoding API" (click on the "More" link at the bottom of the "Google Maps APIs" list to expand it and show all available variants):

      Image

      The "Geocoding" API is responsible for translating a literal address (with a street and city name for instance) to a location on the map. It is not to be confused with the "Geolocation" API! (Thanks to "lousyfool" for pointing that out.)

      So if you wonder why entering an address to set the marker doesn't work, a missing or wrongly configured "Geocoding" API is most likely the cause.

    • Configure the "referers". With mydomain.com as an example (replace that by your domain name!) you should set at least these two referrers:

      *.mydomain.com/  
      *mydomain.com/
      

    Important: Depending on your domain, your Google account and several other aspects these settings could be different!

    • Update:User "pawell" states that the "Google Places API Web Service" is also important to find an address. So activate this feature as well.

Where in doubt about the API and how to create or configure it, please refer to Google's manuals or ask your site's webmaster for assistance.

Once this is taken care of, the Googlemaps should be displayed as expected.

Thank you

  • Widgetkit
  • Tutorial

Edited

39 Answers

16

Avatar jgowans answered

@michael.maas

Thanks for this, really appreciate it. The info you provided indeed removed the "Oops" error, however the maps do not respond to any changes in address and remain fixed on "Hamburg". On 'save & close', any address info that is added to the location field is removed. Image here Any idea on a fix for this (or instruction on what I'm doing wrong)?

4

Avatar bjoern answered

Image

These two are needed to make the location search for the marker available.

Edited

3

Avatar michael.maass Support Online answered

@harald.pott

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Strictly speaking this is only a warning, not an error. So the map should work fine.

For Widgetkit 1.x please take the following approach:

  • Properly configure the Googlemaps API key in your Google Developer account (see above). In particular mind the "referer" settings.

  • Make sure you have the most recent version of Widgetkit 1.x is installed. If it isn't, please update.

  • In the template/theme administration go to Settings.

  • Scroll down to the section Additional Scripts.

  • At the very end of the field insert the following:

    <script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script> 
    

    Where YOUR_KEY has to be replaced with your Googlemaps API key.

    Important: Should there already be a script — like a Google Analytics tracking code script — leave that untouched, add a new line at the very end, and then insert the above script.

  • Save the changes.

Reload the page in the frontend and test the result.



util.js:208
Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
Is this a future problem?

As stated in the URL provide in the warning, this is merely an item of information about a deprecated feature that is not in use anymore:

SensorNotRequired
Warning
The sensor parameter is no longer required for the Google Maps JavaScript API. It won't prevent the Google Maps JavaScript API from working correctly, but we recommend that you remove the sensor parameter from the script element.

(Source: https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required)

If the map is displayed and works, the warning — mind that this is not an error — should not be a problem.

There are 2 types of error codes, errors and warnings. An error indicates a severe issue which occurred while loading the Google Maps JavaScript API. Your page cannot load the API correctly, and the API will not work on that page. A warning is a supplemental message about the loading of the Google Maps JavaScript API. The warning describes the possible reasons for an error, or suggests potential issues in your code that loads the Google Maps JavaScript API. If you receive only warnings without any errors, the API will work correctly on that page. But we recommend that you fix the potential issues as well.

(Source: https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes)

Make sure your Widgetkit 1.x is the most recent version, currently 1.5.8.

Thank you

Edited

2

Avatar sk.walker answered

jgowans - you need to drag the actual marker to the address you want to map.
I also found that the address entry field doesn't work as I would expect.

1

Avatar rolfby4 answered

To calculate a route needs there an API in addition :

"If you have and API key and it is entered in the Widgetkit settings, but you still get errors related to the API:
__
When creating/configuring the API key make sure to enable at least the "Google Maps JavaScript API" and the "Google Maps Geocoding API" (click on the "More" link at the bottom of the "Google Maps APIs" list to expand it and show all available variants):"

To determine the route "Google Maps Directions API" should be enabled. Herewith the Route function working again.

Thx, Rolf

1

Avatar pawell answered

Please add enable "Google Places API Web Service" to the tutorial - without this - the search of locations doesn't work :)

1

Avatar michael.maass Support Online answered

Please add enable "Google Places API Web Service" to the tutorial - without this - the search of locations doesn't work :)

Done!

Thanks for your input

0

Avatar harald.pott answered

It looks like your tutorial covers Widgekit2. I have the old version on my site. Until now the Google maps are displayed. (see Lage auf Norderney or Anreise.

Nevertheless on both page there are errors displayed in the console view.

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys util.js:208

and

Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required util.js:208

Is this a future problem? At the moment there is only a yellow exclamation mark.

Edited

0

Avatar harald.pott answered

I followed your guide and the warnings were gone.

Thank you.

0

Avatar philipp Yootheme answered

@jgowans, @sk.walker

When you enter the address you need to hit enter so that the maker updates it position, after that it will also save the position within the widget.

Kind Regards
Philipp

0

Avatar jgowans answered

@sk.walker thanks, that worked @philipp I'd tried that, but pressing enter does not update the marker position.

0

Avatar philipp Yootheme answered

@jgowans could you create a question for that since this should work, so that we can take a closer look into that?! =)

@nicolas.depeyre what do you mean? The API key should also work on your local machine...

0

Avatar tony.powell answered

I am using Widgetkit 2, and under Settings > Widgetkit, there is only "YooTheme API" - no Google Maps section at all.

0

Avatar brandinal answered

Please Help, in my Widgetkit options only there is "Permissions" tab

0

Avatar michael.maass Support Online answered

@tony.powell

I am using Widgetkit 2, and under Settings > Widgetkit, there is only "YooTheme API" - no Google Maps section at all.

@brandinal

Please Help, in my Widgetkit options only there is "Permissions" tab

Make sure your software is up to date and you use the current version of Widgetkit 2 — 2.7.6 at the time being.

Versions before 2.7.5 did not have this field, because the Googlemaps did not necessarily require the API key before Google changed their policy.

Your Widgetkit "Options" (Joomla) or "Settings" (WordPress) should match those shown in the screenshots in the first post of this thread. If you see anything different, your will most probably be using outdated software.

Thank you

0

Avatar nicolas.depeyre answered

Hello,

I did as you said , I enabled :

API
Embed Google Maps API
Google Maps Geolocation API
Google Maps JavaScript API

I put my key in Widgetkit ... I'm local , and it does not work ...

I tested on different local website

(google api is a devil)

0

Avatar brandinal answered

@michael.mass
thanks for your answer so fast
Make sure your software is up to date and you use the current version of Widgetkit 2 — 2.7.6 at the time being.

Sorry , I do not want to create more issues, but I downloaded Joomla 3.x Extension 2.7.6 AND Joomla 3.x Demo Package.

And I've installed manually by following these steps:
Download the latest Widgetkit version and unpack all files to a local directory.
Using FTP, upload this directory to the /tmp directory of your Joomla installation on your server.
Go to the extensions installer in the Joomla administration, use the "Install from Directory" option to set the directory of your uploaded Widgetkit files.
Click on the Install button and Joomla will install it from the given directory.
And it gives me error.

And I 've also tried with my API

I think I am going to cry

0

Avatar michael.maass Support Online answered

@brandinal

Sorry , I do not want to create more issues, but I downloaded Joomla 3.x Extension 2.7.6 AND Joomla 3.x Demo Package.

Widgetkit is already contained in a YOOtheme "Joomla 3.x Demo Package".
If you want to install a full demo package there is no need to separately download the "Joomla 3.x Extension" package.

The procedure of installing a YOOtheme "Joomla 3.x Demo Package" does in no way differ from installing a standard Joomla package — except that you will get a fully configured Joomla with a YOOtheme template, Widgetkit and YOOtheme example content.

Mind that you can not install the demo content into an already existing Joomla CMS. The demo package contains a full Joomla, the template, Widgetkit, database files, and example content.


And I've installed manually by following these steps:
Download the latest Widgetkit version and unpack all files to a local directory.
[...]
And it gives me error.

I don't know where you found these instructions and you don't tell which error precisely you get, but the approach you describe is plain wrong.

To install Widgetkit into an existing Joomla please follow these steps:

  • Download the most recent "Joomla 3.x Extension" package (no other one!) of Widgetkit 2.

  • In the Joomla backend go to Extensions > Manage > Install > Upload Package File.

  • Click on the button to select the downloaded package (a *.zip file).

  • Click the button to install the package.

Done.

I think I am going to cry

Hush ... ;-)

If you have further trouble with the installation of Widgetkit, please create a new question and provide details.
Do not continue in this thread because it has a wholly different subject.

Thank you

0

Avatar michael.maass Support Online answered

@nicolas.depeyre

I put my key in Widgetkit ... I'm local , and it does not work ...

I am not at all sure how Google will treat a site hosted on a "local" webserver.
Frankly I wouldn't know how to define the referer in the Google account's settings.

Does this local webserve have a fully qualified domain name — via a service like DynDNS for instance — or an IP address that can act as a referer?

Widgetkit will provide the API key you have entered, but it is important that you have activated and properly configured the required APIs in your Google Developer account. Which APIs are required will very much depend on the "situation" of your website. Mind that you would face the same problem if you used the Googlemaps service outside of Widgetkit.

It might be that you also have to enable these APIs:

  • Google Maps Embed API

  • Static Maps API

Also see

and several further sources you will find.

Where in doubt please consult the manual or ask the Google support how to define the referer for a locally hosted site.

Thank you

Edited

0

Avatar lousyfool answered

@michael.maas:

I am not at all sure how Google will treat a site hosted on a "local" web server.

The only way of dealing with this is leaving the referrer field in the Google project empty. After all, it is an optional field. You'll get a little warning triangle in the Google developer console, but it's only a warning, not an error.

If you do leave the referrer field empty, the API key is not at all limited for use to the one or more specific domain(s) or site(s) you would usually enter, but open for use by anyone who gets hold of the key. The use of your API key by others can then eventually lead to your quota for free map loads or geocoding requests getting exceeded (and errors accordingly), even though the quotas aren't really low.

One more thing:

In your tutorial (initial post here) you are suggesting users to activate the Geolocation API. Not sure why: "Geolocation" refers to usage such as showing your current location on a map (e.g. as used on your smartphone map app).
If anything else than the Javascript API, it's the Geocoding API which is required for Google to convert addresses like "Hongkongstraße 8, 20457 Hamburg, Germany" into latitude/longitude coordinates (e.g. as required in the backend when entering an address to have it pinned on the map).
You see many here still having trouble with their addresses "being found" in the map. So, activating the Geocoding API would be the right thing to do then, while Geolocation seems irrelevant during typical Widgetkit usage.
For more info on usage and purpose of the various APIs see Google's Map API Picker.

Thanks for consideration.

Edited

0

Avatar michael.maass Support Online answered

@lousyfool

If you do leave the referrer field empty, the API key is not at all limited for use to the one or more specific domain(s) or site(s) you would usually enter, [...]

This should help "nicolas.depeyre".

[...] but open for use by anyone who gets hold of the key.

So it is a risk someone with "locally" hosted site will have to take.

In your tutorial (initial post here) you are suggesting users to activate the Geolocation API. Not sure why: "Geolocation" refers to usage such as showing your current location on a map (e.g. as used on your smartphone map app).
If anything else than the Javascript API, it's the Geocoding API which is required for Google to convert addresses like "Hongkongstraße 8, 20457 Hamburg, Germany" into latitude/longitude coordinates (e.g. as required in the backend when entering an address to have it pinned on the map).

Yes, my fault entirely. I had the two confused, and corrected that in the tutorial now.

Thanks for pointing out. Much appreciated.

Edited

0

Avatar lousyfool answered

@michael.maas:

So it is a risk someone with "locally" hosted site will have to take.

Nope. At least not if the site on the "local server" is not publicly accessible over the Internet... which it usually is not, unless the admin took some extra effort to enable public access.

On a publicly accessible server/site it doesn't take much to find out the API key, and if the key is not restricted to the key owner's site(s), then others may (ab)use it as well... and this way consume the key owner's free quota, or even - if the key owner has a paid account with Google - cause the key owner additional cost.
But a "truly local" server should not be publicly accessible, and so then there's no risk involved.

In brief:
Site on local server: leave referrer field empty.
Public site, means also when moving site from local server to host: set referrer domain.
Both (public site, plus local dev site): have two projects = two API keys with Google, one with referrer, one without.

Edited

0

Avatar sandstorm871 answered

@michael.maas
Thanks for the full descriptive set of instructions, really helpful as always ;)

I have all this set up and where I have the "Oops Something went wrong" , these are now gone ;)

But as reported in another support post here , when adding an address in the backend, there is no address auto suggestion & the map marker always remains in Hamburg.

I went back into Google API & made sure the "Google Maps JavaScript API" and the "Google Maps Geocoding API" where set to Enable (They where not initially, but I have set these).
This was 3 days ago and after clearing all caches, etc there is still no address auto suggestion & map marker doesnt move.

I double checked the setting are still marked as "Enabled" but now i feel stuck?

Any further ideas?

Thanks in advance,
Andy

0

Avatar f.cee.van.wyk answered

Hi Guys

I have also got the same issue with my maps showing this "Oops something went wrong error".

I have updated my Widgetkit to the lastest version (Updated Today).

So far:

  • I created a Google API Code for the domain the site is on.
  • I enabled both Geocoding & Javascript API's as shown in the Tutorial.
  • I added the API Code to Widgetkit - Options - Google Maps API Key

After doing this, my widgetkit maps in the back-end showed correctly (I could add the address / location.
But on the front end of the site the map still shows the "Oops something went wrong...." error.

Domain name is: www.domus1.co.za

Edited

0

Avatar michael.maass Support Online answered

@f.cee.van.wyk

Make very sure to correctly configure the "Referer" entry/entries in your Google account.

Where in doubt please consult the manual or ask the Google support how to define the referer/s.

Thank you

0

Avatar f.cee.van.wyk answered

@michael.mass

Thank you for your reply, please see how the "reffers" are set up:

*.domus1.co.za/ *domus1.co.za/

Am I missing something?

  • Update *

When I embed a map with simple HTML Code it works and the map shows up correctly:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3596.9800182563167!2d27.77433101501835!3d-25.63878868369267!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1ebe302ef15317e9%3A0xd2d2bd8cb1c9a6b0!2s79+Pienaar+St%2C+Brits%2C+0250!5e0!3m2!1sen!2sza!4v1469024467375" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Although I would like for this to work with Widgetkit as the map has multiple locations / markers.

Edited

0

Avatar carlo.wijering answered

De tutorial works like a charm, BUT be patient. In my case it was correct after 15 minutes.

Tnx Michael!

0

Avatar tonicopi answered

Tnx Michael!

Important: Should your "Options" (Joomla) or "Settings" (Wordpress) screens look different and lack the field for the API key, you are most probably using outdated software. Update your Widgetkit 2 to the current version — 2.7.6 at the time being. Versions before 2.7.5 just do not have this field. Google only recently changed their policy. Before that the Googlemaps did not necessarily required the API key.

I note that if a site has widgerkit 2.7.5 does not appear the warning in the updates of joomla of the need to update the widgetkit and consequently do not see the tab of google api in options

0

Avatar ryan.milani.100 answered

If you're still not finding your fix, make sure you try deleting the Widget you are working on and create a new Widgetkit Widget. This worked for me.

0

Avatar cptnjtk17 answered

Also for the benefit of anyone running into this issue. Assuming you have your API correctly showing in your Joomla or WP backend, I discovered that you must have the web address for BOTH your backend administrator widget page, AND the exact front end page where the map is to be displayed (this per my Chrome developer console message). Once I copied/pasted both the front end and back end web addresses into my Google API credentials setup page, the map worked fine.

Ex:
http://saltacademy.com/administrator/index.php?option=com_widgetkit

AND

http://saltacademy.com/contact

0

Avatar brian.peat answered

For others having issues... for some reason the newest Widgetkit update wasn't showing up as a 1 click, even with the yootheme update plugin enabled and my code in it.

So, I manually updated to 2.7.7 and clicked options and entered the API code there. THAT along with some of the other suggestions (putting the admin url in as a referrer) did the trick for me.

0

Avatar dennisffm answered

Hi Michael,

thanks for the tutorial. I have 3 questions for better understanding:

  1. You say, that we have to enable the "Google Maps JavaScript API" and the "Google Maps Geocoding API". But there is only one API Code generated, which contains these two activated options and which we put into the field in the field "Google Maps API key" in the Widgetkit settings, right?

  2. In your tutorial you say:

"Configure the "referers". With mydomain.com as an example (replace that by your domain name!) you should set at least these two referrers:
__
*.mydomain.com/
*mydomain.com/"

Can you eventually post a screenshot, where those fields are where i have to put my domain inside?

Thanks in advance

Dennis

0

Avatar mauro.miotello answered

I've done many tests with: chrome 54, joomla 3.6.4, widgetkit 2.8.2 and i've seen these issues:
1. I can use Api Browser Key (restricted by site referring) but not Api Server key (restricted by server IP), why?
2. On Location field i can search an address but i cannot search coordinates ! (look image below) why ?
Image

My Api has all geo enabled:
Image

Someone have found same issue?

0

Avatar lemiran answered

hi
on a widgetkit J3 site i've done everything explained here

api key ok with referers
services enabled
added the code in widgetkit latest version
also added the code in the template settings

I have always the oops message.. :-/

Here is my site: http://mfrdivajeu.fr/2017/contact

Thank you
Miran

0

Avatar michael.maass Support Online answered

@lemiran

I have always the oops message.. :-/

Mind that this is not a Widgetkit error message, but one delivered by Google.

If you get this error, please carefully read the complete error message in the console. It should give you the important clues. Either the API key is not entered or the APIs are not correctly configured in your Googlemaps account.

Here is my site: http://mfrdivajeu.fr/2017/contact

The URL results in a 404 error page.

Thank you

0

Avatar arnas.kavaliauskas answered

I did everything and map is displayed, but there is no markers on map, what can be wrong?

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