[Resolved] Map marker not showing on map in frontend

[Author]

Posts

[doronN-2]

I am trying to: add a google map to a layout for custom post types (Organisation)

Link to a page where the issue can be seen: It is a local site on a local server

In the backend layout editing panel, I have this shortcode structure:
[wpv-map-render map_id="map-2"]<p style=""text-align:center>Map Is Loading</p>[/wpv-map-render]
[wpv-map-marker map_id="map-2" marker_id="marker-2" marker_field="wpcf-organisation-address"][/wpv-map-marker]

In the organization editing panel (in the backend), under the org address field - the map is working. i.e I can see the marker in the listed address, In the front end - the map shows, but no markers on it. (Wich I assume indicates that the google map API key set up correctly).

(See Attached Image)

What could be the source of the issue?

[Nigel]

Hi there

these front-end display issues are almost always caused by problems with the URL referrer restrictions in your API key.

If you go to Toolset > Settings > Maps you'll find a Check API button to test the api, which *may* confirm if there are any problems.

However, this also runs on the back end.

The only way to be sure is to edit your API key and remove any URL referrer restrictions, then test again.

If you then see the marker okay then you can try add a URL referrer restriction again, being careful to make it as generic as possible.

Let me know what you find.

[doronN-2]

Hey
Thanks for the tip. I get this error
"REQUEST_DENIED - API keys with referer restrictions cannot be used with this API."

From looking at google documentation on this error

"How do I resolve the error: "API keys with referer restrictions cannot be used with this API."?
You are using any of the web service APIs with an API key restricted to an HTTP referer. For security reasons, web service APIs need to use API keys restricted to IP addresses. Switch your key restriction type from an HTTP referer restriction to an IP address restriction, or create a new API key if your key is already used with the Maps JavaScript API."

I'm not sure I understand this explanation, should I change the Application restrictions in google to IP addresses (web servers, cron jobs, etc.)? Anyway, as it is a local site on a local server, I can not do that.

Attached is the screenshot of my google API console - maybe I'm missing something...

[Nigel]

Can you change your URL referrer to be more generic. You must at least have a trailing wildcard, and I would recommend the following:

*.dialogtogether.com/*

Try that and re-test and let me know if that works.

[doronN-2]

Hey
I Changed the HTTP referrer to "*.dialogtogether.com/*". Still the same error
I also added all 3 API's to the "API restrictions" section (See attached image).

What else can be done to debug? There are no errors in the console. Is there a place I could SEE the error log?

[Nigel]

Can you try removing the URL referrer restriction altogether just to make sure that that works and to confirm that this is the source of the issue?

[doronN-2]

Hey. Sorry for the delay.

Removing the restriction did help. I removed the restrictions and it fixed it - the map showed correctly and the "Check API" button produced a success message.

What can we make of it? It might be because it is a development site on a local server? (URL is hidden link). Or the lack of an SSL certificate? Obviously, we cant leave the API with no restrictions.

Thanks!

[Nigel]

I'm escalating this, as it comes up from time to time but has always been very difficult to reproduce. We are not exactly sure under what circumstances it happens, that a valid URL referrer prevents maps from working.

I'll discuss with the developers how to proceed and get back to you.

[Nigel]

Hi there

Quick update: I'm just back from vacation and checking the internal tickets I see that we intend to make an update to maps whereby it is possible to add a second unrestricted API key for server-based requests (which is not exposed) while using the protected API key for client-based requests (because it is exposed).

There is any inconsistency in how the Google API works and in isolated cases—such as yours—it fails, although we can't determine exactly why, but the two-key solution will fix this.

It will take a while to implement, and in the meantime you'll need to leave your main key unrestricted I'm afraid.

[doronN-2]

Thanks for the update

Doron