Googleマップ - モーダルウィンドウ（Wordpress ACF）

Question

Googleマップスクリプトに少し問題があります。私はモーダルウィンドウ（ブートストラップ）内で私のマップを実行する必要がありますが、新しいウィンドウを開くためにクリックすると、私のマップはレンダリングされません。

これは私がこれを使用してみてください、私のJSスクリプト（Advancedカスタムフィールドスクリプト！）

<script type="text/javascript"> 
    (function($) { 

    function new_map($el) { 

     // var 
     var $markers = $el.find('.marker'); 


     // vars 
     var args = { 
      zoom  : 16, 
      center  : new google.maps.LatLng(0, 0), 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
     }; 


     // create map    
     var map = new google.maps.Map($el[0], args); 


     // add a markers reference 
     map.markers = []; 


     // add markers 
     $markers.each(function(){ 

      add_marker($(this), map); 

     }); 


     // center map 
     center_map(map); 


     // return 
     return 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 contains HTML, add it to an infoWindow 
     if($marker.html()) 
     { 
      // create info window 
      var infowindow = new google.maps.InfoWindow({ 
       content  : $marker.html() 
      }); 

      // show info window when marker is clicked 
      google.maps.event.addListener(marker, 'click', function() { 

       infowindow.open(map, marker); 

      }); 
     } 

    } 

    function center_map(map) { 

     // vars 
     var bounds = new google.maps.LatLngBounds(); 

     // loop through all markers and create bounds 
     $.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) 
     { 
      // set center of map 
      map.setCenter(bounds.getCenter()); 
      map.setZoom(16); 
     } 
     else 
     { 
      map.fitBounds(bounds); 
     } 

    } 

    var map = null; 

    $(document).ready(function(){ 

     $('.acf-map').each(function(){ 

      // create map 
      map = new_map($(this)); 

     }); 

    }); 

    })(jQuery); 
    </script> 

です：いずれかを表示することができます

// popup is shown and map is not visible 
google.maps.event.trigger(map, 'resize'); 

を私は何か間違って:(

を行います私はどこで私はModalの中にGoogleマップを実行する良いコードを入れなければならない？ありがとう！

Answer 1

それは非常に単純なHT MLコード：

<div class="gm_localisation"> 

         <img src="<?php echo get_template_directory_uri(); ?>/images/gm_button.png" alt="gm_btn" data-toggle="modal" data-target="#GoogleMap" class="img-responsive img-btn"> 


         <div id="GoogleMap" class="modal fade" role="dialog"> 
          <div class="modal-dialog modal-lg"> 


          <div class="modal-content"> 
           <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
           <h4 class="modal-title">Lokalizacja</h4> 
           </div> 
           <div class="modal-body"> 

           <div class="acf-map"> 
            <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div> 
           </div> 

           </div> 
           <div class="modal-footer" style="text-align: center;"> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button> 
           </div> 
          </div> 

          </div> 
         </div> 

        </div>