使用另一个选项卡中的jQuery click事件重绘Google地图

Question

首先;如果我的问题不相关，请原谅我。我花了3个小时在stackoverflow和其他一些网站上寻找解决方案，但没办法。

我在使用jQuery.click event重新绘制谷歌地图时遇到了麻烦 我有一些早午餐地图位置。我尝试使用bootstrap的切换面板来展开切换时的每个信息。

这是我的Html（基本）

<div class="panel-group" id="accordion">
    <!-- Şube 1 -->
    <div class="panel panel-default" data-latLng="37.5875768,36.8791207">
        <div class="panel-heading">
             <h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne">
             <b>Tab 1</b> <span class="pull-right"><i class="fa fa-plus"></i></span>
             </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="col-xs-12">
                    <div class="row">
                    <div class="col-xs-6"></div>
                    <div class="col-xs-6">
                        <div class="outlet-map"></div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Şube 1 -->
    <!-- Şube 2 -->
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo" data-latLng="37.5875768,36.8791207">
                 <b>Tab 2</b> <span class="pull-right"><i class="fa fa-plus"></i></span>
             </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="col-xs-12">
                    <div class="row">
                    <div class="col-xs-6">
                    </div>
                    <div class="col-xs-6">
                        <div class="outlet-map"></div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Şube 2 -->
</div>

这是我的javascript和jquery代码;

// Create Map
$('.panel-default').click(function() {
    // Remove unnecesary maps
    $('.panel-group').find('.outlet-map').removeAttr('id');
    // Add id to clicked element
    var latLng = $(this).attr('data-latLng');
    var mapCanvas = $(this).find('.outlet-map');
    mapCanvas.attr('id','map-canvas');
    initialize_map(latLng);
    map.setZoom(15); //You need to reset zoom
    map.setCenter(latLng); //You need to reset the center
});
/*==========  Map  ==========*/
var map;
function initialize_map(latLng) {
    var myLatLng = new google.maps.LatLng(latLng);
    var mapOptions = {
        zoom: 15,
        center: myLatLng,
        scrollwheel: false,
        panControl: true,
        zoomControl: false,
        scaleControl: false,
        mapTypeControl: true,
        streetViewControl: true
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: "images/map-locator.png"
    });
}

我还有一个JS小提琴

https://jsfiddle.net/o0db7qxc/3/

我在点击事件上触发创建新地图，但它没有重绘并带来谷歌地图。 那么有没有办法在点击事件后重新启动谷歌地图？

感谢您提前。

Answer 1

根据你的JS小提琴，改变函数initialize（）就像。

    function initialize(latLng) {
        var latlng = latLng.split(",");
        var mapOptions = {
        center: new google.maps.LatLng(latlng[0],latlng[1]),
        zoom: 15
        };

        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }

也改变了html Tab-2

<div class="panel panel-default" data-latLng="37.5875768,36.8791207">