No output — no map, no html, no console errors

Hi,

At the moment, on that page, I can see a map that’s not produced by this plugin. Is the broken shortcode still on the page?

Hi, thanks for checking and replying so quickly.

Right, that page is now using a different plugin. I had to switch, to get it working quickly.

But I actually prefer yours, so I still hope to resolve this, for this an other sites I work on.

I just setup a new page, just to troubleshoot this.
https://www.jkamdigital.com/map-test/
The map shortcode is between “before map” and “after map”.

As I said, the map is entirely missing.. no html, no console error.

I also have this plugin on another site, where it has problems. Some maps work, some don’t. This page – https://www.velocityboilerworks.com/corporate/sales-reps/missouri/ – has two maps, but only the 1st works; the 2nd is entirely missing. This site has its own API key, with billing connected.

Hi, you’re’ welcome!

In both cases, the shortcode is not outputting anything. There are only a few situations when that happens. The address attribute is empty, or the plugin is not able to resolve the address into lat/lng coordinates using the geocode API. So, we’re probably on issue #2. Assuming the API key is good, and the geocoding API is enabled I’d first try writing the address differently. I know how it sounds but it does work. So instead of “Fulton str” write “Fulton Street” and stuff like that.

Still no luck. Map does not output. No variation of address format helped. I’m now outputting into an HTML comment, the address I’m providing the shortcode, to verify nothing strange in it. Very odd. Plugin can work and fail on two maps, using the same code loop, on the same page. https://www.velocityboilerworks.com/corporate/sales-reps/new-york/

To debug this issue, I output the $response (simple-google-map-short-code.php#118) from Google Maps API, to my Console (using BugFu.. great plugin!).

My $address looks fine, my $api_key is fine, $coordinates returns false, so the plugin hits GMaps api, sending my api-key and the url-encoded address.

https://maps.googleapis.com/maps/api/geocode/json?key=myapikeyremoved&address=123+Mystreet+Rd.%2C+My+Town%2C+CA+81504

(I changed the address for this post)

But the $response includes

  'body' => '{
   "error_message" : "API keys with referer restrictions cannot be used with this API.",
   "results" : [],
   "status" : "REQUEST_DENIED"
}

So, the issue here is:
API keys with referer restrictions cannot be used with this API

I tried changing the restriction to IP, but that also failed.
But when I removed all restrictions (which is ill-advised), the problem is FIXED — the maps now all work as expected.

So.. thoughts?

• This reply was modified 6 years, 3 months ago by htz77. Reason: hide address shown

Figured this out, I think. The plugin calls to
//maps.google.com/maps/api/js?key=
in line 65, but when I changed the url to
‘https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap’
I was able to add Application Restrictions to the API key, as advised, and the maps all work.

Spoke too soon. It had seemed to be working that way — with Application Restrictions (HTTP referrers) on the API Key. But a few hours later, no. Now I need to remove all restrictions, for the maps to work again. But that’s not good, we should have restrictions.

Thank you! You figured it out!!! API keys with referer restrictions cannot be used with this API. That’s the key.

So, when you restrict an API key via the domain param that works for JS and IMG maps (or APIs to be exact). But the same restriction can’t work for the GeoCoding API because it just works differently so Google kills your call immediately. This is documented and expected behavior.

Solution – 2 API keys! One restricted for JS and IMG maps, and one not restricted for GeoCoding. Overly complicated and obviously not supported by our plugin but the only way ??

We’ll have to add one more param for the second API key. That’s the only solution. But we know what’s going on.

Thank you for your help!

Great, glad it helped. Yes, now that you mention it, I use another maps plugin (for a different purpose) that has admin settings for 2 API keys — a Server key (for GeoCoding), and a Browser key (for JS Maps).

By the way, if you update your plugin, to allow for 2 keys, consider adding a Settings page, to set defaults for all shortcode settings — the two api keys, and any other params — rather than hardcoding the defaults in php. Of course the shortcode would override these, but it’d be nice to set global defaults. Thanks for considering.

Also, in troubleshooting this, I found another plugin that works like yours — a simple shortcode with an Address parameter. But it just does a simple iframe/embed — rather than the JS api, or even the Embed api — which (according to the dev) means we don’t need api keys at all, but the map doesn’t have as many features/controls. I wonder your thoughts on this method. What’s the risk of this iFrame approach, or the benefit of the API approach?

For the next update, unfortunately, there won’t be a settings page. Only a new shortcode param. Sorry ?? We just have too many plugins and resources are limited.

Iframe has zero to none customization options. And even the ones it has/had often change. To be frank – with the options we currently have in the plugin it wouldn’t make much difference. But, we always had ideas for things such as multiple pins. Obviously, to put salt on the wound with this API conundrum iframe looks more and more appealing ?? I’ll have a look at the current state of the iframe and if there’s a chance for achieving more/less the same functionality will switch. Two API keys are really too much. What’s next? Four ??

Hi!
I have the same issue – black screen. It happens after WP upgrade.

https://ik-films.com/contact/

https://katrach.com/contact/

please help.

thanks!

Hi,
Is your API key restricted to a certain domain?

no. its open, no restrictions

Please double-check that the geocoding API is enabled.

I delete the map, can’t deal with it anymore.