0

I want to show 2 different maps in accordion(JavaScript Enabled). The main purpose of doing this was to show users an accordion so that users can click on one another to see rather than seeing two big <div> otherwise.

I have done this code (http://jsbin.com/ibanum/1/edit), but the problem is that the second map does appear partially not fully as map1. How to fix that issue?

4

2 回答 2

1

好的，答案就在这里。您应该在单击时刷新 div。所以这里是最终的 JavaScript。但在去那里之前，你可以看看http://jsbin.com/ibanum/20/edit

$(document).ready(function () {

    var fenway = new google.maps.LatLng(48.1391265, 11.580186300000037);

    var mapOptions = {
        zoom: 10,
        center: fenway,
        mapTypeId: google.maps.MapTypeId.ROADMAP


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

    var map2 = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);

    $('#accordion').accordion();
    $('h3').click(function () {

        google.maps.event.trigger(map, 'resize');
    });

});

现在线

google.maps.event.trigger(map, 'resize');

<h3>调整地图的大小，因为标签上有一个点击事件。希望这个样本是清楚的

于 2013-08-06T18:06:53.107 回答
0

在手风琴部分之间切换时，您必须使用以下命令刷新地图容器：

google.maps.event.trigger(map, 'resize');

请参阅相关主题：how-to-update-the-google-map-if-the-map-canvas-of-it-changed-its-dimenstions

于 2013-08-06T18:26:01.400 回答