This article shows how to link Google Maps Elementor widget markers and Carousel widget. After following the steps below, the map markers will be used to switch between carousel slides when clicked and vice versa.
Requirements:
- You will need Premium Addons free plugin installed and activated on your website.
- Make sure that these widgets are enabled so you can find them in the Elementor editor.
- Premium Addons works only with Elementor Page Builder plugin, so you will need to have it installed and activated.
- Ensure you have already added the Elementor Google Maps Widget and the Elementor Carousel Widget to your page.
Adjust Premium Carousel Widget:
- Go to Premium Carousel widget settings -> Content tab -> Carousel, locate the Custom Navigation Element Selector field within the Carousel tab.
- Enter Custom ID (with the
#symbol) into this field. In this case, we entered#starbucks-1. This ID is used to link this carousel slide to a map’s marker.
- Enter Custom ID (with the
- Navigate to Carousel widget settings -> Advanced tab. In CSS ID field, add the ID you want. For example “maps-carousel“
Tailor Elementor Google Maps Widget:
- Go to Premium Google Maps widget settings -> Content tab -> Markers.
- Add a Custom ID to each marker to be used for linking between Google Maps markers and the Carousel widget slides. In our example, we used
starbucks-1. - You may enable the Advanced Info toggle to access this Pro feature. Then, fill in the necessary details such as Address, Website, Phone Number, and Working Hours to provide your visitors with additional information, for more customization, check the Google Maps Tutorial.
- Navigate to the Google Maps widget settings -> Content tab -> Controls. In Connected Carousel Widget ID, add the same CSS ID we added to the carousel widget “maps-carousel“
By following these steps, you can achieve smooth navigation between Elementor Google Maps widget and Elementor Carousel widget, enhancing user engagement on your site.
If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help!
