[Resolved] Map with Elementor

[Author]

Posts

[Pete]

Hi there,

We're using Elementor and we are not happy with their dynamic map for our listings.

I can see plenty of instructions for using Toolset maps however, our listings do not use Views, we have created in a Custom Fields Group, a Post Field Group with an address element there.

Our listings here: hidden link
See map towards the bottom.

Using Elementor everything with dynamically fed.

How do we create a map using Toolset please?

Something that will work for all our listings, a template with a single marker.

I was looking at a View however can't see how to do this.

Thank you.

[Pete]

Update:

I have created a View and got a map to show, however...still not sure this is the right way to go.

The issue, a map of Africa is displaying above the correct map, our map is the lower with our own 'circle marker.

Am I working in the right direction here?

How do I get rid of the Africa map.

And, am I able to move the pin manually?
The address isn't specific and al the moment the pin is in the middle of a lake. we could do with moving it, manually to where it should be.

Thank you.

[Minesh]

Hello. Thank you for contacting the Toolset support.

I would like to know, have you checked the following Docs:
=> https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/
=> https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/create-templates-for-custom-post-types-with-elementor-and-toolset/

As well as the Map Docs:
=> https://toolset.com/documentation/user-guides/display-on-google-maps/

[Pete]

Hi,
We have created these layouts using Elementor and the help of Toolset support.

I have been following some of this page you sent: https://toolset.com/documentation/user-guides/display-on-google-maps/

However it gets pretty confusing.

So all of this is outstanding...

The issue, a map of Africa is displaying above the correct map, our map is the lower with our own 'circle marker.

Am I working in the right direction here?

How do I get rid of the Africa map.

And, am I able to move the pin manually?
The address isn't specific and al the moment the pin is in the middle of a lake. we could do with moving it, manually to where it should be.

[Minesh]

I would like to know did you created map address field using Types? If yes, Can you please just tell me where you wanted to display it and share access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

First of all, the Google Map API keys you added to Toolset => Settings => Maps => Google Map API key
are wrong.

You must create unrestricted google map API keys. Can you please use the following Doc and check if that help and create an unrestricted Google Map API key.
=> https://toolset.com/documentation/user-guides/display-on-google-maps/creating-a-google-maps-api-key/#account-and-billing-information
(For now I've added my test Google map API key, please create yours and register it)

Please check the following screenshot:
=> https://toolset.com/wp-content/uploads/2018/07/954711-API_Dashboard_WorcFoodandDrink.png

Click the blue "Enable APIs and Services" button on the dashboard, and make sure to select Maps and Places APIs and then create a API key. Can you confirm both Maps and Places services are enabled on your account?
=> https://toolset.com/wp-content/uploads/2018/06/917979-Screen_Shot_2018_06_26_at_10.05.35_AM.png

I've adjust the view's "Loop Editor" code. You must put [wpv-map-render] shortcode outside the view's loop output. And then to display the marker, you need to use [wpv-map-marker]
=> hidden link

Can you please check now.
=> hidden link

More info:
Displaying Map:
=> https://toolset.com/documentation/user-guides/display-on-google-maps/#displaying-the-map
Displaying Marker (pins) on map:
=> https://toolset.com/documentation/user-guides/display-on-google-maps/#displaying-markers

[Pete]

Hi there,

I wish you had left the API key as it was, all that was missing was to activate Geocoading API and Places API.

I have added our key back, the one that did work before and now all we are getting is...

REQUEST_DENIED - API keys with referer restrictions cannot be used with this API.

The same key is used on a couple of our Divi websites and it working fine...it's just this site with Toolset????

I cant check as maps are no longer working hidden link

[Minesh]

That is from google I honestly do not have idea, I suggest you should try to create a brand new google map API key and make sure it should be unrestricted key and it should work fine.

[Pete]

No it was something you did!!!!

I have rolled the site back to 'before' you changed anything, all the maps work fine on this page:
hidden link

And on this page:
hidden link

Can you now kindly go back and do what you did to correct the issue on this page please:
hidden link

DO NOT change the API key...it works fine and the following is activated to work with the key we are using!!!!!
Maps JavaScript API
Geocodeing API
Places API

[Minesh]

Ok I've make changes again to the following view:
=> hidden link

I can see its working now.
hidden link

[Pete]

Hi there,

Yes just saw this but it isn't right. It's showing two other properties locations, these just happen to be in the same category.

This needs to show the location set in Toolset > Custom Fields > Default Portfolios Listing > Address Area.

Each listing will have it's own map, and needs to show just the individual location.

Also I had hidden all the controls, why are they all back again?

[Minesh]

ok - its clear now and I can see its working.
=> hidden link

Added the following content template and added the view there which passes the current post ID:
=> hidden link

[wpv-view name="portfolio-map" ids="[wpv-post-id]"]

Added the following Query Filter to your view:
=> hidden link

Post ID filter
Include only posts with IDs set by the View shortcode attribute "ids" eg. [wpv-view name="view-name" ids="1"]

Also, uncheck the chekbox "Don't include current page in query result".

Removed the map module and added the shortcode module and added the following code to it:
hidden link

[wpv-post-body view_template="ct-to-display-single-portfolio-map"]

[Pete]

Hi there,

Ok cool, can see you used a shortcode.

However, when we have used shortcodes before we have used ...

[wpv-map-render map_id="map-family" map_height="100vh" fitbounds="off" cluster="on" street_view_control="off" general_zoom="9" general_center_lat="54.34" general_center_lon="-3.023"][/wpv-map-render]

We need to remove the controls so why wont street_view_control="off" work?
We need to zoom out, it's too close, we need to zoom out.

Also, as asked at the beginning, can we manually move the pin? As you can see it's in the middle of a lake.

[Minesh]

You should move the map pin manually from backend where you map field is displayed, move the pin and save the post so it will be displayed accordingly on the frontend.
hidden link

May I kindly ask you to open a new ticket with every new question you may have. This will help other users searching on the forum as well as help us to write correct problem resolution summery.

In addition to that, my shift is already over, so supporters working in current timezone will be able to help you efficiently. Have a great weekend.

[Pete]

Ref this....

You should move the map pin manually from backend where you map field is displayed, move the pin and save the post so it will be displayed accordingly on the frontend.
hidden link

The map wont show up in the visual builder using Elementor!!!!!

My questions have been the same right from the start....they are not new ones!!!!!