Javascript 使用onClick事件显示不同的地图-googlemapsv3。

尝试根据单击事件显示4个不同的地图。虽然我确实有这种特殊的交互发生，但地图本身并没有正确居中，也无法在中心加载地图

我现在做这件事的方式有点像黑客，因为我在JS方面不是最棒的，在Google地图集成方面也不是最新的，所以如果代码是垃圾请原谅。请随时提供更好、更优雅的解决方案

到目前为止，我已经做到了： -创建并初始化了四个不同的映射。 -用关联地图绘制关联标记（餐饮地图获取餐厅位置等）。 -单击相关导航元素时，地图应显示（单击餐饮，餐饮地图显示）

这是可行的，但地图显示不正确

HTML:

<section class="recommend-map">
      <div class="col-one">
        <h1>Recommends Map</h1>
        <ul>
            <li><a href="#" class="map-canvas">Map 1</a></li>
            <li><a href="#" class="map-canvas-2">Map 2</a></li>
            <li><a href="#" class="map-canvas-3">Map 3</a></li>
            <li><a href="#" class="map-canvas-4">Map 4</a></li>
          </ul>
      </div>
      <div class="col-two">
        <div class="content1" id="map-canvas" style="width: 550px; height: 300px;" data-location="javitz">
        </div>
        <div class="content2" id="map-canvas-2" style="width: 550px; height: 300px;" data-location="javitz">
        </div>  
        <div class="content3" id="map-canvas-3" style="width: 550px; height: 300px;" data-location="pier92">
        </div>
        <div class="content4" id="map-canvas-4" style="width: 550px; height: 300px;" data-location="pier94">
        </div>
      </div>
    </section>

推荐地图

JS:

函数初始化（）{
//为了简洁起见，删除了实际的数组数据，这是非常多的。
变量=[
[“洋基体育场”，40.829584，-73.927571]，
[“南街海港”，40.70514，-74.008734]，
[《音乐剧》，40.762341，-73.978329]，
[“弗里克收藏！”，40.771385，-73.967171]
];
var饮料=[
[“中央公园”，40.78678，-73.966312]，
[“百老汇演出”，40.765461，-73.984337]，
[“百老汇音乐剧”，40.762471，-73.970947]，
[《音乐剧》，40.736169，-74.001621]
];
var屋顶室外=[
[《芭蕾舞》，40.73495，-73.998671]，
[“中央公园”，40.78678，-73.966312]，
[“百老汇演出”，40.756685，-73.987813]，
[《加拉帕戈斯艺术空间》，40.703871，-73.990924]
];
休闲价值=[
[“切尔西女孩”，40.725169，-74.003005]，
[“周而复始”，40.722925，-74.00323]，
[“图书馆”，40.752166，-73.981708]
];
var mapCenter=newgoogle.maps.LatLng（40.75688，-73.984264）；
var map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：12，
中心：地图中心，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var map2=new google.maps.Map（document.getElementById（'Map-canvas-2'）{
缩放：13，
中心：地图中心，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var map3=new google.maps.Map（document.getElementById（'Map-canvas-3'）{
缩放：13，
中心：地图中心，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var map4=new google.maps.Map（document.getElementById（'Map-canvas-4'）{
缩放：13，
中心：地图中心，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
变量标记，标记2，标记3，标记4，i；
//Map1标记
对于（i=0；i<0.length；i++）{
marker=新的google.maps.marker({
职位：新google.maps.LatLng（餐饮[i][4]，餐饮[i][5]），
地图：地图
});
google.maps.event.addListener（标记，'click'，（函数（标记，i）{
返回函数（）{
infowindow.setContent（“+dining[i][0]+”“+dining[i][1]+”
“+dining[i][2]+”
“+dining[i][3]+”
”；
信息窗口。打开（地图、标记）；
}
})（marker，i））；
}
//Map2标记
对于（i=0；i<0.length；i++）{
marker2=新的google.maps.Marker({
职位：新google.maps.LatLng（饮料[i][1]，饮料[i][2]），
地图：map2
});
google.maps.event.addListener（marker2，'click'，（函数（marker2，i）{
返回函数（）{
infowindow.setContent（饮料[i][0]）；
打开（map2，marker2）；
}
})（marker2，i））；
}
//Map3标记
对于（i=0；i<0.length；i++）{
marker3=新的google.maps.Marker({
职位：新google.maps.LatLng（rootoutdoor[i][1]，rootoutdoor[i][2]），
地图：map3
});
google.maps.event.addListener（marker3，'click'，（函数（marker3，i）{
返回函数（）{
infowindow.setContent（网址[i][0]）；
打开（map3，marker3）；
}
})（marker3，i））；
}
//Map4标记
对于（i=0；i

我以前做过这个

我将jquery用于客户端JS

HTML 首先，我将尝试同时渲染所有贴图。对简单地使它们都可见，以便它们彼此推动

CSS 第二，您有“位置：绝对；“尝试”位置：内联块

JS 最后,

在要隐藏在JS代码顶部的3个映射上调用“$（“选择器名称”）.hide（）；”

然后“$（“选择器名称”）.toggle（）；”打开或关闭其他选项

原因：我相信现在的情况是，您已经生成了3个最初隐藏的映射，，这样当客户端加载页面时，DOM实际上没有生成的内容。生成的DOM对象需要委托操作。第一张地图很好用，因为

function initialize() {
// removed actual array data for brevity, it was a lot. 

var dining = [
      ["Yankee Stadium",  40.829584,-73.927571],
      ["South Street Seaport", 40.70514,-74.008734],
      ["Musical", 40.762341,-73.978329],
      ["Frick collection!", 40.771385,-73.967171]
      ];

var drinks = [
     ["Central Park ", 40.78678,-73.966312],
     ["Broadway Shows",  40.765461,-73.984337],
     ["Broadway musicals", 40.762471,-73.970947],
     ["Musical", 40.736169,-74.001621]
     ];

var roofOutdoor = [
      ["The Ballet",  40.73495,-73.998671],
      ["Central Park",  40.78678,-73.966312],
      ["Broadway shows",  40.756685,-73.987813],
      ["Galapagos artspaace",   40.703871,-73.990924]
      ];

var leisure = [
        ["Chelsea Girl",  40.725169,-74.003005],
        ["What Goes Around Comes Around", 40.722925,-74.00323],
        ["The Library", 40.752166,-73.981708]
      ];

      var mapCenter = new google.maps.LatLng(40.75688,-73.984264);

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          zoom: 12,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), {
          zoom: 13,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var map3 = new google.maps.Map(document.getElementById('map-canvas-3'), {
          zoom: 13,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var map4 = new google.maps.Map(document.getElementById('map-canvas-4'), {
          zoom: 13,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, marker2, marker3, marker4, i;



        // Map1 Markers
        for (i = 0; i < dining.length; i++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(dining[i][4], dining[i][5]),
            map: map
          });

          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent("<h1>" + dining[i][0] + "</h1><p>" + dining[i][1] + "</p><p>" + dining[i][2] + "</p><p>" + dining[i][3] + "</p>");
              infowindow.open(map, marker);
            }
          })(marker, i));
        }

        // Map2 Markers
        for (i = 0; i < drinks.length; i++) {
          marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(drinks[i][1], drinks[i][2]),
            map: map2
          });

          google.maps.event.addListener(marker2, 'click', (function(marker2, i) {
            return function() {
              infowindow.setContent(drinks[i][0]);
              infowindow.open(map2, marker2);
            }
          })(marker2, i));
        }

        // Map3 Markers
        for (i = 0; i < roofOutdoor.length; i++) {
          marker3 = new google.maps.Marker({
            position: new google.maps.LatLng(roofOutdoor[i][1], roofOutdoor[i][2]),
            map: map3
          });

          google.maps.event.addListener(marker3, 'click', (function(marker3, i) {
            return function() {
              infowindow.setContent(roofOutdoor[i][0]);
              infowindow.open(map3, marker3);
            }
          })(marker3, i));
        }

        // Map4 Markers
        for (i = 0; i < leisure.length; i++) {
          marker4 = new google.maps.Marker({
            position: new google.maps.LatLng(leisure[i][1], leisure[i][2]),
            map: map4
          });

          google.maps.event.addListener(marker4, 'click', (function(marker4, i) {
            return function() {
              infowindow.setContent(leisure[i][0]);
              infowindow.open(map4, marker4);
            }
          })(marker4, i));
        }
      }

      google.maps.event.addDomListener(window, 'load', initialize);

});

var markers = []; // To keep all markers
// array can be your array of 'dining', 'drinks', 'roofOutdoor' or 'leisure' which you could set by clicking on your a tag.

function setMarkers (array) {
    $.each(markers, function (index, marker) {
        // unset marker (they will be removed from the map)
        marker.setMap(null);
    });

    if (array !== undefined) {
        var bounds = new google.maps.LatLngBounds();
        $.each(array, function (index, value) {
            var pos = new google.maps.LatLng(value[1], value[1]);
            bounds.extend(pos);
            var marker = new google.maps.Marker({
                position: pos,
                map: map
            });
            markers.push(marker);

        });
        map.fitBounds(bounds);
    }
}

<a href="javascript:;" onclick="setMarker(dining);">Show dining markers</a>

<button id="map2">map2</button>

$('#2,#3,#4').hide();

$("#map2").click(function() {
    $('#2').show().siblings().hide();
});

<div class="map" id="2"> your map here </div>