Open Google Map Info Window by Default in DIVI Theme

  DIVI

Tested and works with DIVI version 3.26.3

These instructions are referencing the following blog post:
https://divibooster.com/open-divi-map-module-pin-details-by-default/

Before making any changes to your website, make sure you are using a child theme. This plugin works well for me to create child them.

https://wordpress.org/plugins/child-theme-configurator/

After I create child theme, I delete the plugin because it’s no longer used.

Click here to get instructions on how to add, configure and customize the DIVI map module if you don’t know how to already.

The following code will enable the business name and address to show when you load the web page.

  1. You’ll have to have access to file manager or you can install plugin, WP File Manager.
  2. Copy the footer.php file from the Divi folder and paste it in the Divi-child folder
  3. Add the following code in the footer.php right before close body tag </body> Don’t forget to enclose the following code in script tags
    
    (function($){
    
    	setTimeout(function(){
    
    		$this_map_container = $('.et_pb_map_container'); 
    		$this_map_container.find('.et_pb_map_pin').each(function(){
    			var $this_marker = $(this);
    
    			var marker = new google.maps.Marker({
    				position: new google.maps.LatLng( parseFloat( $this_marker.attr('data-lat') ) , parseFloat( $this_marker.attr('data-lng') ) ),
    				map: $this_map_container.data('map'),
    				title: $this_marker.attr('data-title'),
    				icon: { url: et_pb_custom.builder_images_uri + '/marker.png', size: new google.maps.Size( 46, 43 ), anchor: new google.maps.Point( 16, 43 ) },
    				shape: { coord: [1, 1, 46, 43], type: 'rect' },
    				anchorPoint: new google.maps.Point(0, -45),
    				opacity: 0
    			});
    			
    			if ( $this_marker.find('.infowindow').length ) {
    				var infowindow = new google.maps.InfoWindow({
    					content: $this_marker.html()
    				});
    				
    				infowindow.open( $this_map_container.data('map'), marker );
    
    				google.maps.event.addListener( $this_map_container.data('map'), 'click', function() {
    					infowindow.close();
    					marker.setMap(null);
    				});
    				
    				google.maps.event.addListener(infowindow, 'closeclick', function() {
    					infowindow.close();
    					marker.setMap(null);
    				});
    			}
    		});
    		
    	}, 4000);
    })( jQuery );
    
  4. There should already be a functions.php file in your Divi-child folder, but if not create one.
  5. Add the following code in the functions.php file. Make sure there’s a php open tag at very top of page.
    
            wp_enqueue_script("jquery");
            

That’s it! You should now be able to see the business name and address on the Google map after the page loads. Depending on how fast your website, you may have to adjust the timeout code at the end of the code in step 3. It’s currently set at 4000.

LEAVE A COMMENT