Javascript 简单点击事件谷歌地图

我正试图将点击事件包括到我现有的谷歌地图中（见下面的代码）。我需要它在标记上发生单击事件时缩放地图。它当前会缩放到地图的不同部分吗？也许是因为我在同一张地图上有多个标记

编辑：我做了一个代码笔来演示

var位置=[
[Aberdar/Aberdare'，51.710501，-3.442823,1]，
[Bangor'，53.208431，-4.185703,2]，
[Caerdydd'，51.464783，-3.163191,3]，
[Llangefni'，53.290704，-4.503386,4]，
[Caerfyrddin'，51.858370，-4.328699,5]，
[Dinbych/Denbigh'，53.193235，-3.414290,6]，
[Llanuwchlyn'，52.871170，-3.662876,7]，
[Llangrannog'，52.162539，-4.447742,8]，
[Y Drenewyd/Newtown'，52.512730，-3.312657,9]，
[Abertawe/Swansea'，51.651185，-3.959457,10]，
[Pentre Ifan'，52.008379，-4.779861,11]，
[Yr Wyddgrug/Mold'，53.178779，-3.118454，12]
];
函数初始化（）{
var latlng=新的google.maps.latlng（52.407118，-2.929305）；
变量样式=[
{
“功能类型”：“水”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“a2daf2”
}
]
},
{
“特色类型”：“景观。人造”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“f7f1df”
}
]
},
{
“特色类型”：“景观。自然”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“d0e3b4”
}
]
},
{
“特征类型”：“景观、自然、地形”，
“elementType”：“几何体”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“功能类型”：“poi.park”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“bde6ab”
}
]
},
{
“featureType”：“poi”，
“elementType”：“标签”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“特征类型”：“poi.medical”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#fbd3da”
}
]
},
{
“featureType”：“poi.business”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“功能类型”：“道路”，
“elementType”：“geometry.stroke”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“功能类型”：“道路”，
“elementType”：“标签”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“功能类型”：“道路.公路”，
“elementType”：“geometry.fill”，
“造型师”：[
{
“颜色”：“#ffe15f”
}
]
},
{
“功能类型”：“道路.公路”，
“elementType”：“geometry.stroke”，
“造型师”：[
{
“颜色”：“efd151”
}
]
},
{
“功能类型”：“道路干线”，
“elementType”：“geometry.fill”，
“造型师”：[
{
“颜色”：“#ffffff”
}
]
},
{
“功能类型”：“road.local”，
“elementType”：“geometry.fill”，
“造型师”：[
{
“颜色”：“黑色”
}
]
},
{
“功能类型”：“中转站、车站、机场”，
“elementType”：“geometry.fill”，
“造型师”：[
{
“颜色”：“#cfb2db”
}
]
}
];
变量myOptions={
缩放：8，
中心：拉特林，
mapTypeId:'样式化'，
mapTypeControl:false，
滚轮：错误，
街景控制：错误，
动物控制：对，
scaleControl:false，
真的，
mapTypeControlOptions：{
MapTypeId:['Styled']
}
};
var map=new google.maps.map（document.getElementById（“map”），
肌肽）；
var styledMapType=new google.maps.styledMapType（样式，{name:'Styled'}）；
map.mapTypes.set（'Styled'，styledMapType）；
设置标记（地图、位置）；
$（窗口）.resize（函数（）{map.setCenter（latlng）}）；
}
功能设置标记（地图、位置）{
变量标记
对于（i=0；ivar locations = [
    ['Aberdar / Aberdare', 51.710501, -3.442823, 1],
    ['Bangor', 53.208431, -4.185703, 2],
    ['Caerdydd', 51.464783, -3.163191, 3],
    ['Llangefni', 53.290704, -4.503386, 4],
    ['Caerfyrddin', 51.858370, -4.328699, 5],
    ['Dinbych / Denbigh', 53.193235, -3.414290, 6],
    ['Llanuwchllyn', 52.871170, -3.662876, 7],
    ['Llangrannog', 52.162539, -4.447742, 8],
    ['Y Drenewydd / Newtown', 52.512730, -3.312657, 9],
    ['Abertawe / Swansea', 51.651185, -3.959457, 10],
    ['Pentre Ifan', 52.008379, -4.779861, 11],
    ['Yr Wyddgrug/ Mold', 53.178779, -3.118454, 12]
];

function initialize() {

    var latlng = new google.maps.LatLng(52.407118, -2.929305);

    var styles = [
        {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#a2daf2"
                }
            ]
        },
        {
            "featureType": "landscape.man_made",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#f7f1df"
                }
            ]
        },
        {
            "featureType": "landscape.natural",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#d0e3b4"
                }
            ]
        },
        {
            "featureType": "landscape.natural.terrain",
            "elementType": "geometry",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "poi.park",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#bde6ab"
                }
            ]
        },
        {
            "featureType": "poi",
            "elementType": "labels",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "poi.medical",
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#fbd3da"
                }
            ]
        },
        {
            "featureType": "poi.business",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "geometry.stroke",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "labels",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "road.highway",
            "elementType": "geometry.fill",
            "stylers": [
                {
                    "color": "#ffe15f"
                }
            ]
        },
        {
            "featureType": "road.highway",
            "elementType": "geometry.stroke",
            "stylers": [
                {
                    "color": "#efd151"
                }
            ]
        },
        {
            "featureType": "road.arterial",
            "elementType": "geometry.fill",
            "stylers": [
                {
                    "color": "#ffffff"
                }
            ]
        },
        {
            "featureType": "road.local",
            "elementType": "geometry.fill",
            "stylers": [
                {
                    "color": "black"
                }
            ]
        },
        {
            "featureType": "transit.station.airport",
            "elementType": "geometry.fill",
            "stylers": [
                {
                    "color": "#cfb2db"
                }
            ]
        }
    ];

    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: 'Styled',
        mapTypeControl: false,
        scrollwheel: false,
        streetViewControl: false,
        zoomControl: true,
        scaleControl: false,
        draggable: true,
        mapTypeControlOptions: {
            mapTypeIds: [ 'Styled']
        }

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

    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
    map.mapTypes.set('Styled', styledMapType);

    setMarkers(map,locations);

    $(window).resize( function() { map.setCenter(latlng) });

}

function setMarkers(map,locations){

    var marker, i

    for (i = 0; i < locations.length; i++) {  

        var loan        = locations[i][0];
        var lat         = locations[i][3];
        var long        = locations[i][2];
        var marker_num  = locations[i][3];

        var map_marker = new google.maps.MarkerImage('<?php echo $this->getThemePath(); ?>/images/global/map-marker-'+marker_num+'.png',
            new google.maps.Size(22,33),
            new google.maps.Point(0,0)
        );

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({  
            map: map, 
            title: loan, 
            position: latlngset,
            icon: map_marker
        });

        var content = "<h3 class=\"mapHeading\">" + loan +  "</h3>";     

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

        google.maps.event.addListener(map, 'center_changed', function() {
            // 3 seconds after the center of the map has changed, pan back to the
            // marker.
            window.setTimeout(function() {
              map.panTo(marker.getPosition());
            }, 3000);
        });

        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
                return function() {
                    infowindow.setContent(content);
                    infowindow.open(map,marker);
                    map.setZoom(14);
                    map.setCenter(marker.getPosition());
                };
            })(marker,content,infowindow)); 

    }
}

$(function() {
    initialize();
});

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
            return function() {
                infowindow.setContent(content);
                infowindow.open(map,marker);
                map.setOptions({zoom:14,center:marker.getPosition()});
            };
        })(marker,content,infowindow));