Google Maps Resize не работает

Question

Я использую Карты Google на вкладке (изначально скрытой), а карта создается из кода примера, предоставленного плагином Wordpress Advanced Custom Fields.

Моя карта открывается с отсутствующими плитками. Я понимаю, это потому, что вкладка изначально скрыта, и есть различные решения, использующие google.maps.event.trigger(map, "resize"), но для жизни меня я не могу заставить эту работу работать.

Вот ACF код с основным ammendments я нашел, но по-прежнему не работает:

 (function($) { 
      var map; 
      function render_map($el) { 
       var $markers = $el.find(".marker"); 
       var args = { 
        zoom  : 16, 
        center  : new google.maps.LatLng(0, 0), 
        mapTypeId : google.maps.MapTypeId.ROADMAP 
       }; 
       map = new google.maps.Map($el[0], args); 
       map.markers = []; 
       $markers.each(function(){ 
        add_marker($(this), map); 
       }); 
       center_map(map); 
      } 

      function add_marker($marker, map) { 
       var latlng = new google.maps.LatLng($marker.attr("data-lat"), $marker.attr("data-lng")); 
       var marker = new google.maps.Marker({ 
        position : latlng, 
        map   : map 
       }); 
       map.markers.push(marker); 
       if($marker.html()) 
       { 
        var infowindow = new google.maps.InfoWindow({ 
         content  : $marker.html() 
        }); 
        google.maps.event.addListener(marker, "click", function() { 
         infowindow.open(map, marker); 
        }); 
       } 
      } 

      function center_map(map) { 
       var bounds = new google.maps.LatLngBounds(); 
       $.each(map.markers, function(i, marker){ 
        var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng()); 
        bounds.extend(latlng); 
       }); 

       if(map.markers.length == 1) 
       { 
        map.setCenter(bounds.getCenter()); 
        map.setZoom(16); 
       } 
       else 
       { 
        map.fitBounds(bounds); 
       } 

      } 
      $(document).ready(function(){ 
       $(".acf-map").each(function(){ 
        render_map($(this)); 
       }); 
      }); 
      $(document).on("click", "#map-tab", function() { 
       alert("clicked"); 
       google.maps.event.trigger(map, "resize"); 
       map.setCenter(bounds.getCenter()); 
       map.setZoom(16); 
      }); 
     })(jQuery); 

Может кто-нибудь предложить, что я делаю неправильно? Очень благодарен за любую помощь

Answer 1

Вам необходимо выполнить операцию fitBounds после Карта была отображена (после того, как она показана и имеет окончательный размер). В настоящее время это делается, когда карта скрыта, поэтому она соответствует карте нулевого размера. Обратите внимание: если вы дважды щелкнете по вкладке «Место, упомянутая», она отображает фрагменты, но центр все еще находится в верхнем левом углу.

proof of concept example (Show/Hide делает fitBounds после ДИВ показано, Показать 1/Hide 1 использует свой код)

Answer 2

Во-первых, перейдите к файлу, в котором вы поместили шаблон вкладки, поиск <li> тега, нагрузки вкладка карты и поместить это внутри:

<li onclick="reloadmap()"> 

и в скрипте карты сразу после

google.maps.event.addDomListener(window, 'load', initialize); 

поставить это:

function reloadmap(){ 
    //when you resize the map, you lose your zoom and your center 
    //so you need to get them again here 
    z = map.getZoom(); 
    c = map.getCenter(); 
    google.maps.event.trigger(map, 'resize'); 
    //and set them again here 
    map.setZoom(z); 
    map.setCenter(c); 
}