[Resuelto] Map use on mobile

[Autor]

Mensajes

[Pete]

Hi there,

On this page when viewed on desktop: enlace oculto

You'll see a map to the right. On mobile this map is hidden as it doesn't look great and takes up too much of the page, we wish the grid to have priority.

We are attempting to have a map search as an option. See green button 'search by map'.
This will only show on mobile and display a pop up using Elementor theme builder.

This we can create easy enough however as you can see, a map from the view wont display.

I have a feeling this is due to the map no connecting with 'something' as the popup is created elsewhere in Elementor and we link to this via the button.

Is there any map short code or otherwise we can use in a popup that will display the same map and search markers?
Be great if there was....I have tried various things and none work.

Below is the map short code we are using on the actual page and pop up.

[wpv-map-marker map_id='map-family-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-area' fitbounds="on" cluster="on" street_view_control="off"][wpv-post-featured-image]

[wpv-post-title]

[types field='location'][/types][/wpv-map-marker]

[Christian Cox]

Hello, based on your description so far I'm not quite clear how the map is added to the page. In a non-Elementor environment, you would normally use the wpv-map-render shortcode to display a map. Something like this:

[wpv-map-render map_id="ldc-map"]

Maps shortcode docs can be found here, BTW:
https://toolset.com/documentation/user-guides/maps/maps-shortcodes/

Now let's say you want to display a different map for mobile devices. You would add another map shortcode with a different map ID, like this:

[wpv-map-render map_id="ldc-map"]
[wpv-map-render map_id="ldc-map-mobile"]

When the page loads, two maps will be included in the page source. Now let's say you want to add markers to each map. For simplicity, let's say the same marker information is included in both maps, and you're using a View looping over some kind of posts to add those markers based on an address custom field. You can accomplish in your loop by adding one wpv-map-marker shortcode for each map. Each marker ID should be unique, and it's a good idea to reference the map ID in the marker ID. This helps keep marker IDs unique, too. Otherwise you might end up with two "marker-1" IDs, which is a problem. The solution in a View's loop, for example:

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

Now as the View loops over posts, it will generate two markers for each post. One marker will be placed on the mobile map, and the other will be placed on the higher resolution map. Each marker ID is unique, and also references the map that contains the marker.

Now let's go back and add information into the marker shortcodes so that the same information is displayed in the marker on the mobile map and the marker on the larger map.

[wpv-map-marker map_id="ldc-map" marker_id="ldc-map-marker-[wpv-post-id]" marker_field='wpcf-address-area'][/wpv-map-marker]
[wpv-map-marker map_id="ldc-map-mobile" marker_id="ldc-map-mobile-marker-[wpv-post-id]" marker_field='wpcf-address-area']
  <a href="[wpv-post-url]">
    [wpv-post-featured-image]
    <div style = "height:5px;"></div>
    <span class='popup-title-style'>[wpv-post-title]</span>
    <div style = "height:2px;"></div>
    <span class='popup-type-style'>[types field='location'][/types]</span>
  </a>

So this is very general and I have simplified the shortcodes quite a bit for this explanation, but I hope this helps you understand how those pieces fit together. Now, can you explain in a bit more detail how the mobile map was addd to the popup?

[Pete]

Hi there,

Thanks for your reply.

Ok, please see attachment. We are adding a Toolset map shortcode to the Elementor popup as we do with any pop up created using Elementor.

Essentially we don't wish to try and recreate any map, we simply want to use exactly the same map, with all it's settings and markers.

Is there a way of making the below code work in an Elementor popup? As it stands its not working.

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

[Christian Cox]

Okay generally speaking I would avoid using the Shortcode element with Toolset shortcodes. A text element is usually better, especially if you ever need to use nested shortcodes. The shortcode element doesn't support those at all. Next, any map that isn't displayed immediately upon page load must be initialized when it is displayed. Trigger the following JavaScript code to initialize the map when the popup is shown:

 WPViews.view_addon_maps.init_maps();

I don't know much about Elementor's JS API, but their documentation here includes a popup "show" event hook: https://developers.elementor.com/elementor-pro-2-7-popup-events/
You might be able to use that hook to trigger the maps re-initialization script.

[Pete]

Hi there and thanks for the head up ref using shortcode in a text widget.

Ref your trigger code, I have no idea where this would be added. The docs in the link also suggests code but where on earth do you add this?

[Christian Cox]

Below the "Loop Editor" panel there is a JS editor panel where you can add JavaScript code.

[Pete]

Hi Christian,

Thank you however would you mind being clearer about what I actually do with the code you have supplied?

You've given a suggestion of which I feel I'm 'going round the houses' to clarify what is it exactly I do?

You supplied: WPViews.view_addon_maps.init_maps();

I then asked what do I do with this, you've said add to the Loop Editor JS....which I've done. Still nothing?

It's pointless getting too tecky about this I don't know JS however I'll try various things to try and make something work.

I have tried below...

jQuery( document ).on( 'elementor/popup/show', (elementor-template id="16855") => {
WPViews.view_addon_maps.init_maps();
} );

or

jQuery( document ).on( 'elementor/popup/show', () => {
if ( id="16855" )
WPViews.view_addon_maps.init_maps();
} );

Nothing. The ID of the popup is [elementor-template id="16855"]

Can you please just instruct me what to do with the code you have supplied?
Elementor support wont help as it's Toolset I'm trying to make work!

Thank you.

[Christian Cox]

Sure, I can give more guidance. I assumed based on your comments that you had more advanced JS knowledge. May I have login credentials to take a look in your wp-admin area?

[Christian Cox]

1. I changed the popup map ID to something unique: map-family-popup.
2. I added another marker in the View so you will have a marker displayed in map-family-popup for each item in the loop.
3. I modified the View code so each marker has a unique ID, even if there is more than one map on the page:

[wpv-map-marker map_id='map-family-1' marker_id='marker-[wpv-post-id]-family-1'...

[wpv-map-marker map_id='map-family-2' marker_id='marker-[wpv-post-id]-family-2'...

[wpv-map-marker map_id='map-family-popup' marker_id='marker-[wpv-post-id]-popup'...

4. I updated the JavaScript code in the View's JS panel to be :

jQuery( document ).on( 'elementor/popup/show', function(event, id, instance) {
  if ( id="16855" ){
    WPViews.view_addon_maps.init_maps();
  }
} );

Now it appears the map is loading when I trigger the popup, both on desktop and mobile. Can you confirm?

[Pete]

Hi Christian,

Checked and it works like a charm, thank you very much.

One last question please...more an explanation so I may 'understand'.

I thought I would need to create a popup for each page however I can use the same popup for every page we'll use this on.
All I do is copy the updated view code with the same map marker you added to very other view and 'presto' it updates and works unique for each page.

Check out this other test page: enlace oculto

I guess the view is using the same map code but sourcing its information uniquely the the properties in its own query filter.
This is the case isn't it?

While Toolset is overly complicated at times, it's pretty clever stuff.

Many thanks.

[Christian Cox]

I guess the view is using the same map code but sourcing its information uniquely the the properties in its own query filter.
This is the case isn't it?
Basically yes, I think you get the idea. The wpv-map-render shortcode is a placeholder for the browser to use to display a map. Each wpv-map-marker shortcode is like a set of instructions for displaying one marker on one map. Each map shortcode has a unique ID, so you can add markers to the different maps independently. As a View loops over some posts, you can tell it to add a wpv-map-marker shortcode to any specific map, at a location specified by some custom field value, and containing information relative to the current post. You can give that marker a unique ID as well, then target that marker with specific click events (like the focus on marker feature). So by the time the page has rendered, the browser knows:
- where to place a map or maps, based on map shortcode placeholders
- where to place markers on each map
- what content should be included in each marker
- the centerpoint and zoom level of each map, based on manual settings or based on the markers shown on that map

[Pete]

My issue is resolved now. Thank you!