Open Divi Map Module Pin Details by Default

This post may contain referral links which may earn a commission for this site

Open Divi Map Module Pin Details by Default

Show your Map Module pin details on load without editing core files

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

Open the Map Pin Details by Default using jQuery

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

jQuery(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);
});

Open the Map Pin Details by Default using Divi Booster

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

Open the Map Pin Details by Default using Map Module Extended

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

8 Comments

  1. 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?

    Reply
    • 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!

      Reply
  2. 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

    Reply
    • 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!

      Reply
  3. This stopped working as of Divi version 3.23.3

    Reply
    • 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!

      Reply
      • Thanks so much! That was it.

        Reply
  4. This worked absolutely perfectly, thank you!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Hundreds of new features for Divi
in one easy-to-use plugin

8 Comments

  1. 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?

    Reply
    • 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!

      Reply
  2. 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

    Reply
    • 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!

      Reply
  3. This stopped working as of Divi version 3.23.3

    Reply
    • 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!

      Reply
      • Thanks so much! That was it.

        Reply
  4. This worked absolutely perfectly, thank you!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *