[Resolved] Map marker does not display and map centered on ocean

[Author]

Posts

[mikes-23]

I cannot get map markers to display on the front end. I have read several threads and it is usually the API key that is the problem but I know my API key is fine as it works in the admin screens and also works fine with another plugin I am using on a different site.

If you look at the screenshots attached you will see it working fine in the admin screen for creating my CPT (Event). You can also see I have entered the API key on settings screen but no locations are being cached.

On the front end the map is showing in the ocean, the zoom in button does nothing and the marker does not display.

The marker field is set to the location of the event. I have outputted it below the map to prove it has data.

I've seen few threads with this same problem but they either have no response or they say it started working for no reason.

There are no errors in the javascript console but each time I refresh the page I can see in the Google developers console that the Geocoding API records an error each time the map is loaded on the front end so I think there must be a problem with the request.

Can anyone help me get this working?

[mikes-23]

This is the template markup:

[wpv-map-render map_id='map-1']
[wpv-map-marker map_id='map-1' marker_id='marker-2' marker_field='wpcf-location'][/wpv-map-marker]
<a href="#" class="js-wpv-addon-maps-focus-map" data-map="map-1" data-marker="marker-2">zoom in</a>
<h1>[wpv-post-title]</h1>
<p>[types field='location'][/types]</p>

[mikes-23]

I have tried changing "location" to "event-location" in case there was a naming conflict but no change.

I have tried to output the long/lat with this code:

[types field='event-location' format='FIELD_ADDRESS: FIELD_LATITUDE, FIELD_LONGITUDE'][/types]

The weird thing is that this does not output the long/lat. It outputs the written address and no coords. I have exhausted everything I can think of short of debugging code line by line.

Please help.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Mike,

Thank you for contacting our support forum.

Would you mind providing me with admin access so that I can have a look at this for you ?

The private fields have been enabled.

Thanks,
Shane

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Mike,

Thank you for the credentials.

So the issue is with the API Key.

When I tested the API key that I generated it works, however this was generated without a restriction on the domain.

In order for this to work with your domain using domain restriction you will need to type your domain exactly like this.
*hidden link

Inclusive of the *. Once you have done this you can remove the API key that i've added.

Thanks,
Shane

[mikes-23]

I don't have any restriction on the api key. Is there another restriction setting somewhere?

[mikes-23]

I have tried adding in restrictions to see if that helped and it still doesn't work. I really need this working asap. Any ideas?

[mikes-23]

I worked it out. I generated a browser key in google as this is typically what I use with javascript API, however geocoding API requires a server key. I this is why the backend address finder works but the front end markers do not.

There is several tickets started by other people with the same issue. I think you should relate this to them as I am fairly certain changing it to a server key will fix their problems.