Reply To: ACF Google Maps Rendering

• jasonblackdog

• May 29, 2015 at 1:06 am

Hey @bigdropgr what I used was an onclick function on one of my tab buttons. Specifically this part of my code is what renders the map and resizes it to 100% width and height:

$(document).ready(function(){
        
		$( ".mapclick" ).one( "click", function() {
			//$('.mapclick').click(function(event) {			
          	$('.acf-map').each(function(){
				render_map( $(this) );
			});			
			
			$(window).resize(function() {
				$('.acf-map').height($(window).height() - 170);
			});
				
			$(window).trigger('resize');	
		});

		//$height = $('#wrapper').height();
    	//$('.acf-map').height($height);
		
    
    });

So on one of my tab buttons, I have the class name “mapclick”. Then in my code, I have when the button “mapclick” is clicked, render the map and resize.

Here is my tabs code:

<ul class="products-list">
    <li class="active info countbutton"><a href="#info"><span class="text">Info</span></a></li>
    <li class="photo countbutton"><a href="#photo" class="photoclick"><span class="text">Photos</span></a></li>
    <li class="video countbutton"><a href="#video"><span class="text">Videos</span></a></li>
    <li class="map countbutton"><a href="#map" class="mapclick"><span class="text">Maps</span></a></li>
    <li class="hour countbutton"><a href="#hour"><span class="text">Hours</span></a></li>
</ul>

Let me know if this makes sense.