javascript - Google map - 模态窗口 (Wordpress ACF)

Question

我的 Google map 脚本有一点问题。我必须在模态窗口( Bootstrap )内运行我的 map ，但如果我单击打开新窗口 - 我的 map 不会渲染。

这是我的 JS 脚本(高级自定义字段脚本!)

<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 map ？谢谢!

Answer 1

非常简单的 HTML 代码:

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