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.

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
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 web site designer, specialising in developing modern and responsive WordPress, PrestaShop custom themes, templates, plugins and modules.

More:

Keywords KWP and SEO Keywords KWP and SEO, Keyword Phrase, Onpage SEO, Offpage SEO, H1, H2, indexed, ranked.... what are these things? It's no wonder we get confused and...
Emerging Trends of Web Design for 2012 Trends of Web Design has gained a completely new meaning from the start of the year. With new color schemes, creative concepts and technologies surfac...
Handbags Nika 77 – Amazing Choice Handbags Nika 77 came into existence and are still being developed as a reaction to ready made products often with questionable quality. They endeavou...
Shift+Tab Hides all Adobe Palettes Except Toolbox Shift-Tab Hides all Adobe Palettes Except Toolbox. - Most designers know that tapping the Tab key is the quick way to temporarily hide all open palett...
Draw your graphs in Illustrator This manual is written for Adobe Illustrator CS2, mostly no problem to use the older version. The result will look something like this:Select...

Leave a Reply


Close Menu

Pin It on Pinterest