Hidden Div showing Grey Map

You could use the ‘pronamic-google-maps-ready’ trigger on the $(“.pgm”) or $(“.pgmm”) elements. I think something like this could work:

$('.pgm').on('pronamic-google-maps-ready', function(map) {
  // do your thing
  $('.tab').click(function() {
    google.maps.event.trigger(map, "resize");
  }
});

Thanks for your reply Remco. I really appreciate it.

I’ve taken your example code and replaced the selectors so they reference my ids and I am no longer getting the ‘map not defined’ error, but I’m still seeing most of the map greyed out when the tab is shown.

Here’s my code:

<div class="project_list" id="past_map">

<?php
if(function_exists('pronamic_google_maps_mashup')) {
	pronamic_google_maps_mashup(
		array(
			'post_type' => 'projects',
			'meta_query' => array(
				array(
					'key' => 'project_active',
					'value' => '1',
					'compare' => '='
					),
				array(
					'key' => 'project_status',
					'value' => 'past',
					'compare' => '='
					)
				)
			),
			array(
				'width' => 650,
				'height' => 400,
				'map_type_id' => 'roadmap',
			)
		);
}
?>

</div>

<script type="text/javascript">
	jQuery(function() {
		jQuery('#past_map .pgmm').on('pronamic-google-maps-ready', function(map) {
			jQuery('#show_pastmap').click(function() {
				google.maps.event.trigger(map, 'resize');
			});
		});
	});
</script>

#show_pastmap is the name of the tab that gets clicked to show this map’s hidden div.

It’s probably worth noting that I have a map that loads in another tab that is shown by default when the page is loaded, so 2 maps total, with the one above in the hidden div (using jQuery tabs). The other map has the same query but the value of the key ‘project status’ is ‘current’ whereas this one is ‘past’.

Thanks again.

Can I view this somewhere online?

I think you can fix this issue with the following code:

jQuery( document ).ready( function( $ ) {
	$( "#current_past" ).tabs( {
		activate: function( event, ui ) {
			var mashup = $( ".pgmm", ui.newPanel );

			var map = mashup.data( "google-maps" );

			google.maps.event.trigger( map, "resize" );
		}
	});
});

https://api.jqueryui.com/tabs/#event-activate

Hi Remco, thanks for the code – sorry for my late reply.

It almost works but the map in the affected DIV is then zoomed way out, showing the whole world. I’m continuing to try to implement some ‘map center’ code but it hasn’t worked yet.

It also seems to affect the working of the tabs – they stop working after clicking the affected link to the DIV.

I’m going to keep playing with this but if you can think of any other code for this please send it over.

Thanks again.

Whenever I get this working I’ll post my code here for others to see.