Javascript 在另一个选项卡中使用jQuery单击事件重新绘制Google地图

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

使用

jQuery.click event

我有一些早午餐地图的位置。我正在尝试使用引导的切换面板来显示切换展开时的每个信息

这是我的Html（基本） 我还有一把JS小提琴

我触发点击事件来创建新地图，但它不会重新绘制并带来谷歌地图。 那么有没有办法在点击事件后重新初始化谷歌地图呢

---

感谢您的帮助。

根据您的JS小提琴，更改函数initialize（），如所示

在html选项卡2中也进行了更改

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

在选项卡2中HTML

// 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"
    });
}

    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);
    }

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