Google Map & Accordian

• 59LesPaul

• April 14, 2015 at 4:32 am

Hi there,

I seem to be having trouble getting the Google Map field to properly render when inside an accordion pane. When posted outside of the hidden pane, it displays correctly, when inside a hidden pane, the map is offset by a considerable amount and mostly hidden outside the acf-map div. anyone have this issue and any solution?

• scheurta

• April 14, 2015 at 7:31 am

Hi @59lespaul,

I’m guessing that the map is inside a hidden element? What you need to do is trigger the resize event. google.maps.event.trigger(map, 'resize');

Links for further reading:
http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture
http://stackoverflow.com/questions/3782632/google-map-display-from-a-hidden-area
http://stackoverflow.com/questions/28030786/google-maps-api-v3-hidden-div-map-not-centered-in-div

• opal

• April 24, 2015 at 11:19 pm

In case it’s not obvious to others (it took me days to get the pieces to click)
ORIGINAL

$(document).ready(function(){
	$('.acf-map').each(function(){
		render_map( $(this) );
	});
});

MODIFIED TO DEAL WITH RESIZE ON TAB/ACCORDION HEADER CLICK

$(document).ready(function(){
	$( "#loc" ).click(function() {
		$('.acf-map').each(function(){
			render_map( $(this) );
		});
	});
});

Where #loc is the unique ID on the tab that calls up my map.
You could probably get rid of the $(document).ready(function(){ };