Skip Navigation

[Closed] Maps not showing properly in tabs

This support ticket is created 5 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 -
- 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 6 replies, has 2 voices.

Last updated by Noman 5 years, 9 months ago.

Assigned support staff: Noman.

Author
Posts
#489828
tab maps.jpg

I am trying to:
I have a map field on each tab and the one on the second does not work when you enter an address.

If the two maps are on the same page without tabs it works fine.

I visited this URL:hidden link

I expected to see:
The maps working on both tabs when you enter an address.

Instead, I got:
The map on the second tab does not work.

#489882

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Leonard,

Thank you for contacting Toolset Support. I would be happy to help you in solving this.

This is happening because Google Maps can not be initialized on hidden containers (tabs, accordions, etc…). For a workaround, we need to know the ID of the map that we want to reload and use inside tabs.

Please add the following JS code in Layouts >> Layouts CSS and JS Editor >> JavaScript Editor >> and replace the ‘map-2’ with your 2nd map’s ID:

jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    WPViews.view_addon_maps.reload_map('map-2');
})

Thank you

#489995

Hi Noman

Thanks for the help. It is working partly now and I just have some additional questions. If the map is related to a location field how do I find the map-id?

I have the following code as part of the JS:

jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_completed', function( settings ) {
    if ( settings.map_id == 'MYMAPID' ) {
        $( '.js-wpv-addon-maps-focus-map' ).trigger( 'click' );
    }
});

/*Layouts css goes here*/
jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    WPViews.view_addon_maps.reload_map('map-2');
      WPViews.view_addon_maps.reload_map('map-troopers');
})

The first part is the part where the user click on a location in a view and it then focus on it. How should I change that to work with the map on the second tab?

Thanks
Leonard

#490307

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello Leonard,

I have discussed this with our 2nd tier support and they said that it can not be done with built-in features of Toolset. More custom coding can make it happen as a workaround, but this is something you will need to get done through a developer. We have some recommended list of service providers here if you would like to take a look: https://toolset.com/consultant/

Have a great day.
Thank you

#490346

Thanks Noman

Can you maybe let me know how I find the map-id of a map that is shown as part of a field?

#490416

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello Leonard,

I will try to find out if there is something we can offer you at this point, some hook or anything related to that, I believe we don't have any such thing available but will double check with senior staff and I will update you soon.

Thank you

#490434

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello Leonard,

It will need customization to this shortcode to create a new custom short code and as well as some workaround with javascript to get the Map ID of a map that is shown as part of a field.

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

Further, you can pass the above info and these docs to the developer who is going to do this custom coding work for you, these are related to your requirements:
https://toolset.com/documentation/user-guides/display-on-google-maps/
https://toolset.com/documentation/user-guides/customizing-cluster-markers-with-javascript-functions/
https://toolset.com/documentation/user-guides/cred-api/

Sorry we are not able to help much at this point. We have some recommended list of service providers here if you would like to take a look: https://toolset.com/consultant/

Have a great day.
Thank you

The topic ‘[Closed] Maps not showing properly in tabs’ is closed to new replies.