Home Forums Front-end Issues ACF Google Maps Rendering Reply To: ACF Google Maps Rendering

  • 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:

    		$( ".mapclick" ).one( "click", function() {
    			//$('.mapclick').click(function(event) {			
    				render_map( $(this) );
    			$(window).resize(function() {
    				$('.acf-map').height($(window).height() - 170);
    		//$height = $('#wrapper').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>

    Let me know if this makes sense.