Reply To: ACF Google Maps Rendering

• RRichardson

• February 2, 2016 at 10:57 am

Hi thank you so much for this solution @jasonblackdog.

I have had same issue and have used exact same code with partial success. I have multiple tabs with multiple maps, the first map on click renders correctly but then all other maps after render out in the middle of the ocean instead of the actual location.
So I am guessing this is re-centering problem? Not quite sure

$(document).ready(function(){

  $( 'a[data-toggle="tab"]' ).one( "click", function() {
  
  $('.acf-map').each(function(){
        render_map( $(this));
  });

  $(window).resize(function() {
        $('.acf-map').height($(window).height() - 170);

        });
          
        $(window).trigger('resize');
        //center = map.getCenter(); ???
        //map.setCenter(center);  ???
        
  });
});

I have also added this in too under the center_map() call

google.maps.event.addListenerOnce(map, 'idle', function(){
     google.maps.event.trigger(map, 'resize');
     center_map(map);
 });