[Resolved] location map coordinate not showing correctly from front-end

[Author]

Posts

[abdullaA]

Hi,

first off, all the project data are from naresco.ae website i only clone the whole website and redesign the layouts for front-end.

the issue now is, from the previous projects taken from naresco.ae website all fields are working fine, if i open other exported projects its all good, the location map pin is in correct point.

now if i add a new project to these new site, then add data from the coordinate field the location map from front-end doesn't seems working. though from the back-end the map its showing correct.

sample previous project with no issue
hidden link

sample new project that i add with map issue
hidden link

Thanks in advance

[Nigel]

Hi there

This looks like a problem with your Google API key.

If you include URL referrer restrictions with your key and you have migrated the site then make sure that the key restrictions are updated to match the new URL.

If you still have problems you may need to add a second, unrestricted, key for server-to-server requests as described in https://toolset.com/documentation/user-guides/display-on-google-maps/creating-a-google-maps-api-key/#problems-with-displaying-markers-on-google-maps

[abdullaA]

i went to google api and regenerate a new key, then use it on naresco.ae and it works, i use it in alfahidialuminum.ae it didn't work.

i disabled application restriction and use as None, and add alfahidialuminum.ae on Domain verification.
I add second api

but still no luck.

with the new API keys, when i check the projects page and view the old posted project its all working fine, but the newly added project the issue is still there.

[Nigel]

OK, thanks for verifying all of that.

Looking at your screenshots, you are adding project posts in the backend, and you are entering lat/lon coordinates for the location rather than an address, is that correct?

And these work in the backend, but don't display correctly in the frontend?

[abdullaA]

yes that is correct, as you can check on my first uploaded image.

[Nigel]

The same works on my local test site, so I'm not sure what the issue is with yours.

Is it okay if I perform a couple of tests on your site, and take a copy to install locally if I need to?

(I have the site credentials, thank you.)

[abdullaA]

yes sure please.

[Nigel]

Sorry, that user is not an administrator, I can't do anything useful in the backend.

[abdullaA]

[ hidden ]

[Nigel]

The problem isn't the password, it is the role of the user. It's not an administrator. I can't see anything in the backend apart from project posts, I can't do any testing.

Perhaps it would be better if you made a copy of the site for me: hidden link

You can paste a link to dropbox or similar here, it will only be visible to you and the support team.

[abdullaA]

thats strange

anyway heres another username:

[Nigel]

OK, thanks, that works.

I did some preliminary testing but I need to take a closer look, so I'm taking a copy of the site.

I'll install that locally, and then I'll get back to you with my findings.

[Nigel]

The problem seems to be that you have created two Location Map custom fields, one with the slug location-map and another with the slug bldg-location-map, and your template is currently outputting a marker using the location-map field, which only the older projects use, and your newer projects are saving the bldg-location-map field, hence no marker is created.

I'm not sure what the history of the site is that would explain why you have this mix of two address fields with the same name but different slugs, but it seems like you need to update your project posts so they all use the same one and then use that to generate the marker.

I didn't comment yet about your set up to output the maps, which is not what's expected.

As you are outputting a map with a single marker in a template for single project posts, then the customary way to do this would be to insert the map and marker shortcodes directly in the template.

But you are using Elementor templates, not Toolset templates, and we cannot add the Fields and Views button to insert such shortcodes within Elementor modules—as we do with other page builders—because there's is a closed system that we cannot modify. So you are using the Views widget to insert a View, and generating the map using that View, which is somewhat redundant.

Not only that, but the way you have created the View it is querying and looping over *all* project posts and—because you inserted the map shortcode within the loop and not just the marker, inserts the map and the marker multiple times (once for each project post). You could limit the View with a Query Filter so that it only returns the project post which is currently being viewed, but to be able to do that you need to use shortcode attributes to provide the value of the post id in the Query Filter, but—again—because you are using Elementor templates and the Views widget, you cannot readily provide such shortcode attributes.

I would create a dummy Toolset template (at Toolset > Content Templates) and use the Fields and Views button to insert the map and marker shortcodes, as if this template were to be used for single project posts. Then copy those shortcodes and paste them into a text module in your Elementor template, in place of where you currently insert the View.

[abdullaA]

thanks nigel,

still a lot to learn from these plugins. seems i messing up something that i didn't notice. will try to figure it out as im just totally new to these plugin.
thanks for all the inputs.

[Nigel]

OK, well hopefully there is enough info in my last reply so that it is clear.

Let me know how you get on.