[Resolved] Address in map is not showing on the front end, but okay in the admin

[Author]

Posts

[paulG-5]

I have custom post with google map. Google API is okay and when searching for an address everything show okay in the back end and shows the correct place on the map.

However in the frontend it does not and places is it in Africa, where I guess the Lon Lat is 0,0.

It will only work on the frontend if I move the pin slightly to make the GEO coords.

Why is it picking up the coordinates and not the google map address?

My shortcode is this.

[wpv-map-marker map_id='map-details' marker_id='marker-4' marker_icon='//***/wp-content/uploads/2018/03/map-pin-yellow.png' marker_field='dbt_dev_address'][/wpv-map-marker]
[wpv-map-render map_id="map-details" map_width="100%" map_height="400px"][/wpv-map-render]

Also, since the update the map in the admin is very small. Can this be fixed.

[Shane]

Hi Paul,

Thank you for contacting our support forum.

I see you are adding the markers before the map is rendered.

Could you try it like this.

[wpv-map-render map_id="map-details" map_width="100%" map_height="400px"][/wpv-map-render]
[wpv-map-marker map_id='map-details' marker_id='marker-4' marker_icon='//***/wp-content/uploads/2018/03/map-pin-yellow.png' marker_field='dbt_dev_address'][/wpv-map-marker]

The next thing I noticed is that the marker_field is "dbt_dev_address". Usually when this is a field created in Types it will have the wpcf- prefix attached to it. So by definition it should be wpcf-dbt_dev_address.

Thanks,
Shane

[paulG-5]

Hi Shane,

Sorry, those options don't work.

Added the wpcf- prefix and it didn't work at all with the long/lat coords.

dbt_dev_address is an inherited custom field which is probably why.

It's almost like Google is not passing on the coordinates from the address.

[Shane]

Hi Paul,

Could you try it like this,

marker_field = "[wpv-post-field name='dbt_dev_address']"

However try doing this and let me know if the address is displayed.
[wpv-post-field name='dbt_dev_address']

[paulG-5]

Hi Shane

Doesn't work with the first option at all.
The address does come out in full as [wpv-post-field name='dbt_dev_address'] added under the map.

Also I tried it with a brand new address post field, and get the same issue.

Screenshot attached , address as full address & with the pin moved slightly to give coords.

[paulG-5]

If it helps and gets the issue fixed quicker, I can give you a duplicator copy of the website and database.

[Shane]

Hi Paul,

You can just provide access if possible because all I need to do is to understand the setup.

This will allow me to see why its not working.

The private fields have been enabled.

Thanks,
Shane

[paulG-5]

Hi Shane
I can't do that as I've only updated it locally. Plus I've removed all the private data from the live site.
Have uploaded a duplicator backup without the wp-uploads file.

hidden link

[Shane]

Hi Paul,

Ive set the duplicator,

Could you let me know the page that the map is on ?

[paulG-5]

Any of the custom posts in properties.
hidden link

[Shane]

Hi Paul,

The marker loads the correct location but i'm not seeing the actual marker on the map but the location is correct.

However i'm checking to see why the markers are not showing.

Thanks,
Shane

[Shane]

Hi Paul,

On second thought it works fine, see screenshot

All i did was add the marker below the map shortcode.

Thanks,
shane

[paulG-5]

Hi Shane. I copied what you did but still not showing. Is the map showing the address from Google or the coordinates?

[paulG-5]

Have also tried on the live server, still doesn't work. Please check the the google meta should be an address and not long/lat coodinates. Thanks.

[paulG-5]

OK. I have fixed it. It was an API issue after all.

I turned on all the Google Dev map api's. It now shows on the front end. Not sure why it was working on the back end and not on the front end. It must be new as it worked fine in January.

Finally the really small map in the admin, the toolset css style for the wpt-form-item.

.wpt-form-item {
    display: flex;
    width: 100%;
    align-items: center;
}

I have changed the display to block instead of flex.