Open Divi Map Module Pin Details by Default

A common request I get is for a way to have the Divi theme's Map Module pin details shown by default, without requiring the user to click the marker. Due to the way Divi generates its Google Maps, there is no way to directly access the markers added by the Map Module. This makes it difficult to make a marker show by default.

A tutorial by Phire Base describes how to do it by directly editing the Divi core files. This is not an ideal way to do it, though, as the changes will be lost whenever you update Divi. For a while I thought this was the only way it could be done.

However, I've now come up with a better way, which doesn't require editing Divi's files and will survive theme updates.

Open the Map Pin Details by Default using jQuery

While there is no way to access the pin markers, it turns out it that it is possible to access the map object. This doesn't give access to the pin markers, but it does enable a trick that achieves the required effect of having the pin details open by default.

By copying the code Divi uses to add the pins, we can add another set of identical pins over the top of the ones Divi has added. They will look the same and be in the same place, but have the benefit that we can edit their properties. In this way we can configure them to show the pin details by default. Then if the details are closed we can delete our pins, leaving the originals to behave as they normally do.

The following jQuery will cause all pins to start open by default:

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

I've added an option in Divi Booster (v2.6.9 upwards) to allow you to control which map pins are shown, without the need to add any code. Additionally, the Divi Booster feature allows you to control the behavior of individual pins. This means, for example, that you can choose to show the pin details by default for some pins on the map, but leave the details hidden on other pins on the same map.

You can use the feature by going into the Pin Settings for a pin in the Map Module and setting "Show Details by Default" to "Yes", like so:

Open the Map Pin Details by Default using Map Module Extended

Another option for showing the map pin details by default is the Map Module Extended plugin. This plugin adds a new module to Divi which behaves like the standard map module, but with additional style and functionality options, one of which is the ability to open the pin details on load. By re-implementing the module, this plugin is able to bypass the need for the technique I've described in this post.

The Map Module Extended plugin lets you choose on a module-by-module basis whether to show the pin details, rather than on a pin-by-pin basis as is the case in Divi Booster.

Want get more out of Divi?

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

10 Comments

  1. Thanks – exactly what I needed.

    Reply
    • Glad it helped, Jayden. Thanks for letting me know.

      Reply
  2. 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
  3. 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
  4. 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
  5. This worked absolutely perfectly, thank you!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

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

Divi Booster

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

10 Comments

  1. Thanks – exactly what I needed.

    Reply
    • Glad it helped, Jayden. Thanks for letting me know.

      Reply
  2. 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
  3. 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
  4. 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
  5. This worked absolutely perfectly, thank you!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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