Display Divi Map Pin Details Window by Default using Divi Booster
This method demonstrates how to configure a Divi map module so that a pin's info window is shown by default, utilizing the 'Show Details by Default' option provided by Divi Booster within the marker settings. This approach is ideal for site owners who want to automatically highlight specific location details to visitors, streamlining access to important information without the need for additional clicks.
Add or Edit a Map Module and Insert a New Pin
Open your page in the Divi Builder and add a Map module to your layout, or edit an existing Map module. Within the Map module settings, click the "Add New Pin" button to create a new marker for your location.
Enter Your Map Pin Details
When adding your pin, fill in the relevant fields: enter a title for your location and a description in the provided fields. These are the details that will appear in the pin's info window.
Enable 'Show Details by Default' for the Map Pin
Within the pin’s settings panel, look for the 'Show Details by Default' setting. Set this toggle to 'Yes' to ensure the pin's info window is open as soon as visitors view the map.
Save and Publish Your Changes
After finishing your pin settings, save your changes in the Map module and publish (or update) your page. This will make your map with the auto-open details window available to your site’s visitors.
View and Confirm Info Window is Displayed by Default
Visit your page on the front end. You should now see your map displayed with the chosen pin, and the info window open automatically, showing your location's title and description.
Conclusion
That's it! Your Divi map now displays pin details automatically, making important information more prominent and accessible to your visitors.
Thanks – exactly what I needed.
Glad it helped, Jayden. Thanks for letting me know.
I have Divi Booster (3.0.1) and Divi (3.29.3) and the Show Details for the pin isn't working. What could be the problem?
Hey Steve, is there any chance you're able to share a link to the page you're working on so that I can take a look for you? Thanks!
Where exactly do I make this edit to fix this problem? I am also having this problem and I am not sure where to exactly edit this to fix it without it breaking on next update.
Thanks
Hi Wolvyreen, if you've already added the code from this post to your site in the past then wherever you added it will be where you need to edit it. Just replace your previous copy of the code with the new version given above. If you're not sure where this was, perhaps you can send me a link to your map page and I'll see if I can work out where it is.
If you haven't added the code yet, then you can do in the way described in this post:
https://divibooster.com/adding-javascript-and-jquery-to-the-divi-theme/
Code added in that way won't be removed by Divi updates.
I hope that helps!
This stopped working as of Divi version 3.23.3
Hey Shay, it looks like a timing issue. The original version of the code waited 1000ms (i.e. 1 second) after the page load to give the map time to load. However, it looks like the map loading is now taking longer than that (particularly on first load of the page when nothing is cached). I'm not sure yet if this is due to Google maps changes or changes in Divi. Bumping up the timeout to 4000ms seems to solve it, and I've updated the code (second last line) above with the change. You may be able to get away with a bit less (3000ms works consistently for me), but it's probably worth keeping a bit of buffer time in case of further map loading slowdown or slow user connections.
I aim to look into a better way of detecting when the map is fully loaded so that the code can be run at exactly the right time.
I hope that helps!
Thanks so much! That was it.
This worked absolutely perfectly, thank you!