How to make Divi map module Pin open by default

Divi theme have a integrated Map module. The maps modules makes it easy to embed custom Google Maps anywhere on your page. You can even add unlimited pins to the map, and define a custom viewport starting location.

Right now this module don’t have a option to pop up map pin marker on load.  We must hope it will be implemented surely in one of next main updates. As a admin of more than twenty install’s of custom Divi websites I know that most of client’s definitely want Divi map pin marker  to be opened automatically on load of desired page in browser.

Update:

Divi Booster pluginOpen the Map Pin Details by Default

 


Deprecated method / Divi map module Pin marker open by default

The solution for this problem is just one line of code that need to be added in frontend-builder-scripts.js file.
You can do it this way:

Open file divi/include/builder/script/frontend-builder-scripts.js
find this:

google.maps.event.addListener(marker, 'click', function() {
                                if( infowindow_active ) {
                                    infowindow_active.close();
                                }
                                infowindow_active = infowindow;

                                infowindow.open( $this_map_container.data('map'), marker );
                            });
                        }
                    });
                }

and replace with this:

google.maps.event.addListener(marker, 'click', function() {
                                if( infowindow_active ) {
                                    infowindow_active.close();
                                }
                                infowindow_active = infowindow;

                                infowindow.open( $this_map_container.data('map'), marker );
                            });
                                infowindow.open( $this_map_container.data('map'), marker );
                        }
                    });
                }

now the map pin will be loaded open. Enjoy!

Download

Download and unpack the file, open your FTP program and upload frontend-builder-scripts.js to divi/include/builder/script/ in main Divi theme.


frontend-builder-scripts.zip

Theme Name: Divi
Version: 3.0.51 and bellow
Download

Just remember that this is core modification and you need to keep in mind when you update theme time to time.

Why is no good make core modification?

Source: google map Info window – WordPress Development Stack Exchange

Other solutions:

Map Extended Module | Monterey Premier’s Divi Plugin Marketplace – Divi Custom Map Extended Module is designed to work with any Divi Builder based site. you have 72 preload color map styles to choose from. You can add your own pin icon and set the icon/image width and height. You can also show the infoWindow on load as well as Font styling on title and content! You can have bounce animation on the marker pin too!

David

Graphic and website designer, currently, I attend to the maintenance of about thirty sites for existing clients as well as creating websites for the new ones. In my free time, I get into the secrets of the world of Linux, SSH, WP-CLI and I’m preparing this blog.

More:

How to Edit Images in WordPress I was helping a client with their site this week and we saw that we needed to edit her WordPress blog images. Why? Because the text and the images we...
The Best eCommerce WordPress Themes for Profession... WordPress themes and Website templates are one of the viable way of creating an alluring website. 2013 will be a great year when it comes to using Wor...
Magento vs WordPress: What to Choose for an eComme... There has been a remarkable growth in the online commerce industry. We can also see an increase in the eCommerce platforms that are available to us. W...
Adobe Photoshop CS2 Thumbnails PSD File in Windows... So where did the Adobe Photoshop CS2 Thumbnails in Windows Explorer go? They simply disappeared! Well actually CS2 no longer supports thumbnail .PSD ...
10 Amazing Themes for your WP based e-Store from 2... A website is the best tool to connect with potential customers. It is a very powerful and useful promotional tool that can take your business to great...

This Post Has 5 Comments

  1. Hey David, thanks for the article!

    In case you’re interested, I (finally) came up with a way of doing this without needing to edit the core files. Basically, you can access the map object and then add another identical (overlaid) set of markers to the ones Divi adds, but set them to have the infobox open. Details here, if you’re interested:

    https://divibooster.com/open-divi-map-module-pin-details-by-default/

    Cheers!
    Dan

    1. Hi Dan, thank you for the info. I’m all ready using your divibooster plugin, so it’s a great news. Keep up the good work.

  2. Hey David, I’ve tried to follow your tutorial but it didn’t work :(

    1. I’m sorry about that, but remember this will work only for Divi Version: 3.0.51 and bellow. If you are using the last versions of Divi, this will not work. Check out divibooster plugin, it will solve this problem for you easily.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Newsletter

Join our mailing list to receive the latest news and updates.

You have Successfully Subscribed!

Pin It on Pinterest