Javascript 谷歌地图中心和信息窗口

如果在其他地方回答了这个问题，我很抱歉，但是当我在地图中添加一个侦听器时，它会导致我的标记隐藏/不加载，那么有人能解释一下如何在单击时加载infowindow并将其置于标记中心吗

以下是我目前的代码：

<section id="wrapper">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<article>
</article>
<script>
function success(position) {
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcontainer';
  mapcanvas.style.height = '600px';
  mapcanvas.style.width = '100%';
  document.querySelector('article').appendChild(mapcanvas);

  var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var options = {
    zoom: 12,
    //center: coords,
    center: new google.maps.LatLng(51.416741,-0.543854),
    mapTypeControl: false,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

  // Geolocation
  var marker = new google.maps.Marker({
      position: coords,
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
      title:"You are here!",
  });

  // Great Fosters
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.416741,-0.543854),
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
      title:"Great Fosters",
  });

  // St Matthews
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.432327,-0.459162),
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/icons/orange-dot.png',
      title:"St Matthews",
  });

  // ----- STAINES HOTELS - START -----
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.435698,-0.514469),
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
      title:"Travel Lodge Staines",
  });

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.432156,-0.51617),
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
      title:"Thames Lodge Staines",
  });

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.43218,-0.516293),
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
      title:"The Boleyn Staines",
  });

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.432534,-0.516422),
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
      title:"The Swan Staines",
  });
  // ----- STAINES HOTELS - END -----

}
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}
</script>
</section>

变量标记=[
[Great Foster'，51.416741，-0.543854，'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'],
[St Matthews'，51.432327，-0.459162，'http://maps.google.com/mapfiles/ms/icons/orange-dot.png'],
//斯坦斯
['Travel Lodge Staines'，51.435698，-0.514469，'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
[Thames Lodge Staines'，51.432156，-0.51617，'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
[The Boleyn Staines'，51.43218，-0.516293，'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
[The Swan Staines'，51.432534，-0.516422，'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
//萨里
['TheRunnymede酒店'，51.43751，-0.537544，'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
[“麦瑟夫酒店”，51.409151，-0.592704，'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['ThePremierInnSunbury'，51.419322，-0.42248，'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
[The Crown Chertsey'，51.39181，-0.501861，'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
//希思罗机场
[索菲特希思罗酒店，51.473478，-0.49152，'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
[希思罗万豪酒店，51.481263，-0.438209，'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
[希思罗首相酒店，51.481615，-0.482288，'http://maps.google.com/mapfiles/ms/icons/green-dot.png']
];
功能成功（职位）{
var mapcanvas=document.createElement（'div'）；
mapcanvas.id='mapcontainer'；
mapcanvas.style.height='600px'；
mapcanvas.style.width='100%'；
document.querySelector（'article'）.appendChild（mapcanvas）；
var coords=new google.maps.LatLng（position.coords.latitude，position.coords.longitude）；
变量选项={
缩放：12，
//中心：coords，
中心：新google.maps.LatLng（51.416741，-0.543854），
mapTypeControl:false，
导航控制选项：{
样式：google.maps.NavigationControlStyle.SMALL
},
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“mapcontainer”），选项）；
//标记控制
var infowindow=new google.maps.infowindow（），marker，i；
对于（i=0；i
要在单击地图时将地图居中放置在标记上，请更改代码：

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        // center on marker
        map.setCenter(marker.getPosition());
        // open the infowindow
        infowindow.setContent(markers[i][0]);
        infowindow.open(map, marker);
    }
})(marker, i));

要使fitBounds工作，必须将.extend方法传递给google.maps.LatLng对象。考虑到现有代码，最简单的方法是将其放入“标记控制”循环中：

var-bounds=new google.maps.LatLngBounds（）；
对于（i=0；i
您正在对所有标记重复使用同一变量
marker
，因此它们不会存储在任何位置，并且句柄丢失。您可以创建一个数组并将所有创建的标记存储在该数组中，然后调用每个标记并使用markerName.visible（'true'）嗨，我该怎么做？或者你能告诉我在哪里可以了解数组吗？实际上我现在明白了，但是我如何定义数组中的图标和信息窗口？它将像
var-markerArrays=[]、marker1、marker2、marker3；marker1=new google.maps.Marker（{位置：new google.maps.LatLng（51.432534，-0.516422），map:map，icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png，标题：“天鹅之家”，}）；markersArray.push（marker1）
so
markersArray
将拥有所有ur标记。如果您想隐藏/显示该标记，只需执行
标记数组[1]。可见（'true'）
（或false）当我们有多个标记且所有信息窗口都打开时，我们将如何操作，然后要将谷歌地图居中？请分享你的建议。谢谢
google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        // center on marker
        map.setCenter(marker.getPosition());
        // open the infowindow
        infowindow.setContent(markers[i][0]);
        infowindow.open(map, marker);
    }
})(marker, i));

var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map,
        icon: markers[i][3]
    });
    bounds.extend(marker.getPosition());
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}
map.fitBounds(bounds);