[Resolved] Map Issues using Elementor

[Author]

Posts

[Pete]

Hi there,

On this page: hidden link
We see, when viewing in admin with Elementor, the map and pins working fine, here it's showing Africa, can't work out why?

When you're setting this up in Views, it says you can use %, this wont work for height.
I've seen another support ticket saying use VH.
https://toolset.com/forums/topic/make-map-size-dynamic/

The whole point is to have the map 'fill' the area to the right, this depending on how many listings appear to the left.
The list may end up being about 4 rows before pagination, sometimes it may be less.

Is there a way of setting the height and making the map 'sticky' and stay in position while the listings ot the left scroll.

Many thanks, Pete

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Pete,

Thank you for contacting us and I'd be happy to assist.

1. If the map's pin markers are only showing when you're logged in as an admin, it could be related to the access permission for non-logged-in visitors (guests).

Please make sure that the guests have read access to post type from which the map marker location is being picked up.
( ref: https://toolset.com/documentation/user-guides/setting-access-control/ )

In case the guests do have the proper read access and the map markers are still not showing, I'll need to see how the map is set up in the admin area. Can you please share temporary admin login details?

Note: Your next reply will be private and though no changes will be made on your website, please make a complete backup copy, before sharing the access details.

2. The basics of CSS and Jquery/Javascript code works the same way, whether you're using the Toolset plugins or not. To check which CSS code is applying to different page elements and include your own custom CSS, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

We also have a guide on adding custom CSS code at:
https://toolset.com/documentation/user-guides/adding-custom-css-views/

As much as we would like to help, 1-1 custom code assistance is beyond the scope of support that we provide ( ref: https://toolset.com/toolset-support-policy/ ). But we do our best to guide in the right direction, whenever possible.

For example, to make the right column with the map, stay fixed while scrolling and to make it cover the available screen height, you can include following custom CSS code in the view's "CSS Editor":

@media only screen and (min-width: 768px) {
.page-content .elementor-section-wrap .elementor-top-section .elementor-column-gap-no > .elementor-row > div:nth-of-type(2) {
	position: fixed;
	right: 0;
}

#js-wpv-addon-maps-render-map-5-1 {
	height: calc(100vh - 100px) !important;
}
}

I hope this helps and for more personalized assistance around custom code, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Pete,

Thank you for sharing the admin access.

1. During troubleshooting, I noticed that the map markers were not showing through the view, due to an already hightlighted issue between Elementor and Toolset Maps plugin.

When the Maps shortcode is rendered inside the Elementor page builder, an additional "-1" is appended to it's ID. I'm afraid, I don't have a time estimate to share at the moment, but will update you throught this ticket, once this issue gets resolved.

For now, the workaround is to append the extra "-1" at the end of map ID used in the marker's shortcode as well, so that it changes from:
( screenshot: hidden link )

[wpv-map-marker map_id='map-5' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-area'][/wpv-map-marker]

To:

[wpv-map-marker map_id='map-5-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-area'][/wpv-map-marker]

2. The approach of using inspect element tool to narrow down to specific page elements for custom CSS code, will remian the same, regardless of which page builder you're using. You just need to know, which HTML tags should be targeted to achieve a certain design/layout:

For example, for this new page designed through Gutenberg, note how the targeted HTML elements and some styles are changed:

@media only screen and (min-width: 768px) {
#kt-layout-id_42a5da-ed .kt-row-column-wrap > .inner-column-2 {
    position: fixed;
    right: 0;
    width: 35%;
}
 
#js-wpv-addon-maps-render-map-5 {
    height: calc(120vh - 100px) !important;
}
}

regards,
Waqar

[Pete]

Hi Waqar,

Thank you for looking into this for me.

Hmmm, so when the map in Elementor is fixed and the extra "-1" is no longer needed, will all the maps break and we'll have to go into each one to remove it? Yikes!
(This is also the case in Gutenberg pages?)

Thank you for the CSS below, can I ask will this work for every page or is it page specific? It also doesn't work on iPad.
I am trying to recreate as many pages in Gutenberg as I can, so on the page you added the map CSS below, the text heading has vanished: hidden link

It has a text heading very like this Elementor page: hidden link

@media only screen and (min-width: 768px) {
#kt-layout-id_42a5da-ed .kt-row-column-wrap > .inner-column-2 {
position: fixed;
right: 0;
width: 35%;
}

#js-wpv-addon-maps-render-map-5 {
height: calc(120vh - 100px) !important;
}
}

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Pete,

Thanks for writing back.

> Hmmm, so when the map in Elementor is fixed and the extra "-1" is no
> longer needed, will all the maps break and we'll have to go into each
> one to remove it? Yikes!
> (This is also the case in Gutenberg pages?)

- Your understanding is correct and when the compatibility issue between Toolset Maps and Elementor page builder will be fixed, you'll need to manually remove the extra "-1" from the marker shortcodes.

If you'd like to avoid this manual removal later and would also like to use the same view with Elementor and other page builders now, you can include both instances of map marker shortcodes ( i.e. with and without "-1" ):

[wpv-map-marker map_id='map-5' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-area'][/wpv-map-marker]
[wpv-map-marker map_id='map-5-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-area'][/wpv-map-marker]

This way, the map markers will work, with and without the issue.

> Thank you for the CSS below, can I ask will this work for every page or is it page specific?

- The CSS code examples that I've shared are not page-specific, but they are using CSS selectors, based on the position and names of the HTML elements of the pages that you've shared.

This means that if you'll use the same view on a different page, and the order of sections or names of class or ID used in the CSS code is different on that page, then yes, you'll need to update your CSS code accordingly as well.

These guides on CSS syntax and selectors should help:
hidden link

Let me briefly explain how customization works and when and why familiarity with CSS code proves useful. Utilities like Toolset, Gutenberg and Elementor, etc provide many features out-of-the-box. However, for any specific design/layout requirement, which isn't covered ( like in this case the fixed column positioning and screen height fill ), custom CSS code will be needed.
( note: I would also recommend checking with Elementor plugin's official support and documentation first, to see if any of these features are available builtin, which would save you from adding custom CSS code ).

As mentioned in my first reply, when it comes to customization, we can only provide suggestions and examples to get started in the right direction. This is why acquaintance with CSS code and Google's Inspect Element tool becomes so important for anyone willing to extend the design, as per specific requirements.

> It also doesn't work on iPad.

- The example CSS code snippets that I've shared would only apply on screens with a minimum width of 768 px.
( note: the use of media query line "@media only screen and (min-width: 768px)" )

You can learn more about CSS media queries from:
hidden link

I noticed that on both pages ( built with Gutenberg & Elementor ), the two columns stack on top of each other ( instead of showing side-by-side ) when the screen width becomes narrower than 768px. This is why it made sense to structure the CSS code to only apply to screens when the two columns are side-by-side.

Using the same principle, you can plan ahead on how you'd like your content to be presented to visitors with different screen sizes and devices.

Both Gutenberg & Elementor builders offer many features to deal with layout's responsiveness based on screen sizes. I'll recommend to first make sure that what you're planning is not achievable using built-in features and if confirmed, include custom CSS code.

> I am trying to recreate as many pages in Gutenberg as I can, so
> on the page you added the map CSS below, the text heading has
> vanished: hidden link
> It has a text heading very like this Elementor page:
> hidden link

- I apologize for missing out this detail. The CSS code that I shared for the Gutenberg page ( hidden link ), seems to be incorrectly applying to the heading section as well.
( this is why the use of the correct CSS selectors is so important )

To make this code, only apply to the right column section with the map, you can update this code line from:

#kt-layout-id_42a5da-ed .kt-row-column-wrap > .inner-column-2

To:

#kt-layout-id_42a5da-ed > .kt-row-column-wrap > .inner-column-2

I hope this helps.

regards,
Waqar

[Pete]

Hi there Waqar,

Thank you very much for your detailed explanation of various insights, more than helpful.

I will add 2 instances of the map code as this map help thing in the future, it's great there is a work around...thank you.

However the map is working on the Gutenberg page, and not the Elementor Page.

See Gutenberg Page:
hidden link

See Elementor Page:
hidden link

They are both using the same map:
[wpv-map-marker map_id='map-5-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-area' fitbounds="off" general_zoom="3" single_zoom="15" cluster="on" street_view_control="off"][/wpv-map-marker]

Now you'll see I have add more shortcodes, this taken form other tickets I have seen on Toolset by others.
Street view is still showing and the zoom has not changed.

That said it's odd how it's 'sort of' working on one page but not the other.
Either way, the zoom and other shortcodes haven't taken effect.

Any thougths would be cool.

Pete

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Pete,

Thanks for the update and glad the explanation helped.

1. The map markers were not showing on the Elementor page ( hidden link ), because the additional "-1" was also appended into the map's shortcode ( "[wpv-map-render]" ).
Screenshot: hidden link

The workaround fix, that we've been discussing only required addition of "-1", in the map marker's shortcode ( "[wpv-map-marker]" )

2. The additional attributes ( e.g. fitbounds="off" general_zoom="3" single_zoom="15" cluster="on" street_view_control="off" ) are not working because, these are designed to work with map's shortcode and not with the map marker's shortcode.

It's important to keep a note of the difference between the two shortcodes:

a). [wpv-map-render]: This shortcode renders the map and its supported attributes are available at:
https://toolset.com/documentation/user-guides/maps-shortcodes/#wpv-map-render

b). [wpv-map-marker]: This shortcode renders the map markers and its supported attributes are available at:
https://toolset.com/documentation/user-guides/maps-shortcodes/#wpv-map-marker

Hope this clarifies the difference between these two shortcodes.

regards,
Waqar

[Pete]

Ahh thank you for clarifying where the -1 needs to go. All good.

So, clearly the map is too zoomed in on the 2 pages we have tested.

As it stands in Toolset > Loop item in Search Map 3

I have the below code. I would like to have more control, can you give me an example of this where I 'can' have these shortcodes included please?
fitbounds="off" general_zoom="3" single_zoom="15" cluster="on" street_view_control="off"

[wpv-map-marker map_id='map-5-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-area'][/wpv-map-marker]

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Pete,

These attributes need to be included in the shortcode for the map ( [wpv-map-render] ).

1. In the Gutenberg Page it is placed in the content:
( screenshot: hidden link )

[wpv-map-render map_id="map-5-1"][/wpv-map-render]

Updated shortcode:

[wpv-map-render map_id="map-5-1" fitbounds="off" general_zoom="3" single_zoom="15" cluster="on" street_view_control="off"][/wpv-map-render]

2. In the Elementor Page it is placed in the content:
( screenshot: hidden link )

[wpv-map-render map_id="map-5" map_height="100vh"][/wpv-map-render]

Updated shortcode:

[wpv-map-render map_id="map-5" map_height="100vh" fitbounds="off" general_zoom="3" single_zoom="15" cluster="on" street_view_control="off"][/wpv-map-render]

You can adjust the values of these attributes as needed, based on the explanation of each attribute, in the shortcode's documentation:
https://toolset.com/documentation/user-guides/maps-shortcodes/#wpv-map-render

regards,
Waqar

[Pete]

Hmmm I'm puzzled. To clarify thing we have deleted the Gutenberg Page.

However as it stands, on the Elementor Page: hidden link
This shortcode is being used.

However in Toolset > Search Map 3 > Loop item in Search Map 3 the unchanged map code is there, not the map render one.
Have you placed this somewhere else by mistake?

This is still there:
[wpv-map-marker map_id='map-5-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-area' fitbounds="off" general_zoom="12" single_zoom="15" cluster="on" street_view_control="off"][/wpv-map-marker]

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Pete,

I haven't made any changes and in the second last message ( https://toolset.com/forums/topic/map-issues-using-elementor/#post-1295955 ), I mentioned that the additional attributes should be used with the map's shortcode and not with the map marker's shortcode.

This means that you can remove the "fitbounds="off" general_zoom="12" single_zoom="15" cluster="on" street_view_control="off" part from the view's loop item, and add it in map's shortcode, as shown with examples, in the last message.
( https://toolset.com/forums/topic/map-issues-using-elementor/#post-1296047 )

To make it even simpler, the shortcode in view's loop item will change from:

[wpv-map-marker map_id='map-5-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-area' fitbounds="off" general_zoom="12" single_zoom="15" cluster="on" street_view_control="off"][/wpv-map-marker]

To:

[wpv-map-marker map_id='map-5-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-area'][/wpv-map-marker]

And the map shortcode added in the Elementor's page template will need to be changed from:

[wpv-map-render map_id="map-5" map_height="100vh"][/wpv-map-render]

To:

[wpv-map-render map_id="map-5" map_height="100vh" fitbounds="off" general_zoom="12" single_zoom="15" cluster="on" street_view_control="off"][/wpv-map-render]

regards,
Waqar

[Pete]

Goodness! This gets no more easier. Ok...I understand...thank you.

I have done this and sure it works, however why is the map close up over an ocean rather than centering on where the pins are?

See: hidden link

I've changed the zoom. I presuming yet another shortcode?

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Pete,

Glad that it is working now.

If you'll check the highlighted section of this map shortcode's documentation ( ref: https://toolset.com/documentation/user-guides/maps-shortcodes/#wpv-map-render ), you'll learn the role of each shortcode attribute.
( screenshot: hidden link )

In summary, by default "fitbounds" is turned on, in which map's zoom level and the central location is automatically controlled, to best fit all the map markers.

However, when we turn off fitbounds ( using fitbounds="off" ), we need to not only specify the zoom level ( through "general_zoom" attribute ) but also need to specify the longitude and latitude of the location, that you'd like to manually center ( "general_center_lat" and "general_center_lon" attributes ).

For this reason, I'll recommend keeping "fitbounds" turned on so that it can automatically choose the best zoom level and map center, based on all the available map markers. Managing these manually will become very challenging, as the number of map markers will grow.

regards,
Waqar

[Pete]

Goodness, this is getting very frustrating.

Ok, I have set fitbounds="on" general_zoom="6".

My issue, sure we will have many more pins however, as a default the map is too zoomed in. I am trying to zoom it out slightly so it shows the whole are of Cumbria. It's pointless it being so close, a visitor will have no perception of where this is in relation to any other location being so close.

So, is there a way we can, maintaining what we have...us being able to set the zoom out range to our choosing?

[Pete]

Issue not resolved. Given up!!!!!