Google maps 谷歌地图：点击标记自动居中地图

我需要一些帮助来绘制我正在绘制的地图。地图并不特别复杂，因为我是一个初学者，我有一堆带有信息窗口的标记（完成后还会有更多标记），单击标记或选择页面HTML端下拉菜单的相应项时可以打开这些标记

当信息窗口打开时（在HTML菜单中单击或选择），我想做但自己找不到的是在地图上自动居中标记。我假设有某种函数可以分配给click或infowindow打开事件，但无法确定是哪种函数以及如何实现它

我的代码：

function initialize() {

      var CarteStyles = [
        {
          featureType: "all",
          stylers: [
            { saturation: -50 }
          ]
        },
        {
        elementType: "labels",
        stylers: [
          { visibility: "off" }
        ]
      },
        {
            featureType: "road",
            stylers: [
              { visibility: "simplified" },
              { saturation: -90 }
            ]
        },
        {
        featureType: "road.local",
        "stylers": [
          { "color": "#dbdbd4" }
        ]
      },
    {
          featureType: "road",
          elementType: "labels",
          stylers: [
            { visibility: "off"}
          ]
        },
        {
            featureType: "poi",
            stylers: [
              { visibility: "off" }
            ]
        },
        {
          featureType: "poi.park",
          stylers: [
            { visibility: "on" }
          ]
        },
        {
          featureType: "poi.park",
          elementType: "labels",
          stylers: [
            { visibility: "off"}
          ]
        }
      ];

      var CarteType = new google.maps.StyledMapType(CarteStyles,
        {name: "Carte"});

      var mapOptions = {
        zoom: 16,
        center: new google.maps.LatLng(48.872769, 2.30488),
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP,google.maps.MapTypeId.SATELLITE,'Carte'],
          position: google.maps.ControlPosition.TOP_LEFT,
          style: google.maps.MapTypeControlStyle.DEFAULT
        }
      };
      var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

      map.mapTypes.set('Carte', CarteType);
      map.setMapTypeId('Carte');

    <!--START Hpr-->        
            var contentStringHpr = '<div id="content">'+
                '<h2 id="firstHeading" class="firstHeading">HPR</h2>'+
                '<div id="bodyContent">'+
                '<p>Descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringHpr
            });
            var HprMarker = new google.maps.Marker({
                position: new google.maps.LatLng(48.856682, 2.3274526),
                map: map,
                icon: new google.maps.MarkerImage('icon_hpr.png'),
                title:"HPR",
                zIndex: 3});
    <!--STOP Hpr-->

    <!--START Cal-->        
            var contentStringCal = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h2 id="firstHeading" class="firstHeading">CAL</h2>'+
                '<div id="bodyContent">'+
                '<p>descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringCal
            });

            var CalImage = new google.maps.MarkerImage('icon_cal.png'
            );

            var CalPos = new google.maps.LatLng(48.872769, 2.30488);

            var CalMarker = new google.maps.Marker({
                position: CalPos,
                map: map,
                icon: CalImage,
                title:"Cal",
                zIndex: 3});
    <!--STOP Cal-->

    <!--START Rsh-->        
            var contentStringRsh = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h2 id="firstHeading" class="firstHeading">RSH</h2>'+
                '<div id="bodyContent">'+
                '<p>descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringRsh
            });

            var RshImage = new google.maps.MarkerImage('icon_rsh.png'
            );

            var RshPos = new google.maps.LatLng(48.865862, 2.329943);

            var RshMarker = new google.maps.Marker({
                position: RshPos,
                map: map,
                icon: RshImage,
                title:"RSH",
                zIndex: 3});
    <!--STOP Rsh-->

    <!--START Rh-->     
            var contentStringRh = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h2 id="firstHeading" class="firstHeading">RH</h2>'+
                '<div id="bodyContent">'+
                '<p>descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringRh
            });

            var RhImage = new google.maps.MarkerImage('icon_rh.png'
            );

            var RhPos = new google.maps.LatLng(48.874140, 2.300144);

            var RhMarker = new google.maps.Marker({
                position: RhPos,
                map: map,
                icon: RhImage,
                title:"RH",
                zIndex: 3});
    <!--STOP Rh-->

    <!--START Rdr-->        
            var contentStringRdr = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h2 id="firstHeading" class="firstHeading">RDR</h2>'+
                '<div id="bodyContent">'+
                '<p>descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringRdr
            });

            var RdrImage = new google.maps.MarkerImage('icon_rdr.png'
            );

            var RdrPos = new google.maps.LatLng(48.865717, 2.308944);

            var RdrMarker = new google.maps.Marker({
                position: RdrPos,
                map: map,
                icon: RdrImage,
                title:"RDR",
                zIndex: 3});
    <!--STOP Rh-->

    <!--START Boutique1-->      
            var contentStringBoutique1 = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h2 id="firstHeading" class="firstHeading">Boutique1</h2>'+
                '<div id="bodyContent">'+
                '<p>descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringBoutique1
            });

            var Boutique1Image = new google.maps.MarkerImage('icon_bags_2.png'
            );

            var Boutique1Pos = new google.maps.LatLng(48.87, 2.31);

            var Boutique1Marker = new google.maps.Marker({
                position: Boutique1Pos,
                map: map,
                icon: Boutique1Image,
                title:"Boutique1",
                zIndex: 3});
    <!--STOP Boutique1-->

    <!--START Place1-->     
            var contentStringPlace1 = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h2 id="firstHeading" class="firstHeading">Place1</h2>'+
                '<div id="bodyContent">'+
                '<p>descr</p>'+
                '<p><a href="#">Plus d\'informations</a></p>'+
                '</div>'+
                '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentStringPlace1
            });

            var Place1Image = new google.maps.MarkerImage('icon_place_arc.png'
            );

            var Place1Pos = new google.maps.LatLng(48.873836,2.295037);

            var Place1Marker = new google.maps.Marker({
                position: Place1Pos,
                map: map,
                icon: Place1Image,
                title:"Place1",
                zIndex: 3});
    <!--STOP Place1-->

            google.maps.event.addListener(HprMarker, 'click', function() {
                infowindow.setContent(contentStringHpr);
                infowindow.open(map,HprMarker);
            });
            google.maps.event.addListener(CalMarker, 'click', function() {
                infowindow.setContent(contentStringCal);
                infowindow.open(map,CalMarker);
            });
            google.maps.event.addListener(RshMarker, 'click', function() {
                infowindow.setContent(contentStringRsh);
                infowindow.open(map,RshMarker);
            });
            google.maps.event.addListener(RhMarker, 'click', function() {
                infowindow.setContent(contentStringRh);
                infowindow.open(map,RhMarker);
            });
            google.maps.event.addListener(RdrMarker, 'click', function() {
                infowindow.setContent(contentStringRdr);
                infowindow.open(map,RdrMarker);
            });
            google.maps.event.addListener(Boutique1Marker, 'click', function() {
                infowindow.setContent(contentStringBoutique1);
                infowindow.open(map,Boutique1Marker);
            });
            google.maps.event.addListener(Place1Marker, 'click', function() {
                infowindow.setContent(contentStringPlace1);
                infowindow.open(map,Place1Marker);
            });

            var selectChoices = {
                Boutique1Choice: Boutique1Marker,
                Place1Choice: Place1Marker,
                CalChoice: CalMarker,
                RshChoice: RshMarker,
                RhChoice: RhMarker,
                RdrChoice: RdrMarker,
                HprChoice: HprMarker
            };

            google.maps.event.addDomListener(
                document.getElementById("selectLocation"), 'change',
                function() {
                google.maps.event.trigger(selectChoices[this.value], "click");
            });
            google.maps.event.addDomListener(
                document.getElementById("selectLocation2"), 'change',
                function() {
                google.maps.event.trigger(selectChoices[this.value], "click");
            });
            google.maps.event.addDomListener(
                document.getElementById("selectLocation3"), 'change',
                function() {
                google.maps.event.trigger(selectChoices[this.value], "click");
            });
            google.maps.event.addDomListener(
                document.getElementById("selectLocation4"), 'change',
                function() {
                google.maps.event.trigger(selectChoices[this.value], "click");
            });

        }

函数初始化（）{
变量类型=[
{
featureType:“全部”，
样式：[
{饱和度：-50}
]
},
{
elementType:“标签”，
样式：[
{可见性：“关闭”}
]
},
{
特色类型：“道路”，
样式：[
{可见性：“简化”}，
{饱和度：-90}
]
},
{
featureType:“road.local”，
“造型师”：[
{“颜色”：“#dbd4”}
]
},
{
特色类型：“道路”，
elementType:“标签”，
样式：[
{可见性：“关闭”}
]
},
{
特征类型：“poi”，
样式：[
{可见性：“关闭”}
]
},
{
功能类型：“poi.park”，
样式：[
{可见性：“在”}
]
},
{
功能类型：“poi.park”，
elementType:“标签”，
样式：[
{可见性：“关闭”}
]
}
];
var CarteType=new google.maps.StyledMapType（CarteStyles，
{名称：“点菜”}）；
变量映射选项={
缩放：16，
中心：新google.maps.LatLng（48.872769,2.30488），
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP，google.maps.MapTypeId.SATELLITE，'Carte']，
位置：google.maps.ControlPosition.TOP_左上角，
样式：google.maps.MapTypeControlStyle.DEFAULT
}
};
var map=new google.maps.map（document.getElementById（'map_canvas'），
地图选项）；
map.mapTypes.set（'Carte'，CarteType）；
map.setMapTypeId（'Carte'）；
var contentStringHpr=“”+
“HPR”+
''+
“Descr
”+
“
”+
''+
'';
var infowindow=new google.maps.infowindow({
内容：contentStringHpr
});
var HprMarker=新的google.maps.Marker({
位置：新google.maps.LatLng（48.856682,2.3274526），
地图：地图，
图标：新的google.maps.MarkerImage（'icon_hpr.png'），
标题：“HPR”，
zIndex:3}）；
var contentStringCal=''+
''+
''+
“卡尔”+
''+
“descr
”+
“
”+
''+
'';
var infowindow=new google.maps.infowindow({
内容：contentStringCal
});
var CalImage=new google.maps.MarkerImage（'icon\u cal.png'
);
var CalPos=new google.maps.LatLng（48.872769,2.30488）；
var CalMarker=new google.maps.Marker({
职位：CalPos，
地图：地图，
图标：CalImage，
标题：“Cal”，
zIndex:3}）；
var contentStringRsh=“”+
''+
''+
“RSH”+
''+
“descr
”+
“
”+
''+
'';
var infowindow=new google.maps.infowindow({
内容：contentStringRsh
});
var RshImage=new google.maps.MarkerImage（'icon\rsh.png'
);
var RshPos=new google.maps.LatLng（48.865862,2.329943）；
var RshMarker=new google.maps.Marker({
职位：RshPos，
地图：地图，
图标：RshImage，
标题：“RSH”，
zIndex:3}）；
var contentStringRh=''+
''+
''+
“右侧”+
''+
“descr
”+
“
”+
''+
'';
var infowindow=new google.maps.infowindow({
内容：contentStringRh
});
var RhImage=new google.maps.MarkerImage（'icon\u rh.png'
);
var RhPos=new google.maps.LatLng（48.874140,2.300144）；
var RhMarker=new google.maps.Marker({
职位：RhPos，
地图：地图，
图标：RhImage，
标题：“RH”，
zIndex:3}）；
var contentStringRdr=“”+
''+
''+
“RDR”+
''+
“descr
”+
“
”+
''+
'';
var infowindow=new google.maps.infowindow({
内容：contentStringRdr
});
var RdrImage=new google.maps.MarkerImage（'icon\u rdr.png'
);
var RdrPos=new google.maps.LatLng（48.865717,2.308944）；
var RdrMarker=新的google.maps.Marker({
职位：RDRPO，
地图：地图，
图标：RdrImage，
标题：“RDR”，
zIndex:3}）；
变量contentString1=''+
''+
''+
“大约
google.maps.event.addListener(RdrMarker, 'click', function() {
   map.setCenter(RdrMarker.getPosition());
   infowindow.setContent(contentStringRdr);
   infowindow.open(map,RdrMarker);
});

google.maps.event.addListener(RdrMarker, 'click', function() {
   map.panTo(RdrMarker.getPosition());
   infowindow.setContent(contentStringRdr);
   infowindow.open(map,RdrMarker);
});

google.maps.event.addListener(marker, 'click', function() {
     map.setCenter(marker.getPosition());   
});