Google maps 谷歌地图V3-点击加载不同的标记功能

因此，我的HTML中包含以下内容，代表英国的地区：-

<h4 id="google-ne" class="active">The North East</h4>
<h4 id="google-nw">The North West</h4>
<h4 id="google-ea">East Anglia</h4>
<h4 id="google-em">East Midlands</h4>
<h4 id="google-tm">The Midlands</h4>
<h4 id="google-wm">West Midlands</h4>
<h4 id="google-ld">London</h4>
<h4 id="google-se">South East</h4>
<h4 id="google-sw">South West</h4>
<h4 id="google-ws">Wales</h4>
<h4 id="google-sl">Scotland</h4>

我现在想做的是点击“West Midlands”

#google wm

，它会删除地图上当前的所有标记，然后只显示

数据区域所在的标记

这怎么可能呢

提前谢谢。
你可以这样做。对我添加/更改的部件的代码进行注释


var标记=[]；
var映射；
函数初始化（）{
var mylatng=newgoogle.maps.LatLng（52，-1）；
变量映射选项={
缩放：6，
中心：myLatLng，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
$（'.marker'）。每个（函数（）{
变量位置={
latLng：新的google.maps.latLng(
$（this）.data（'lat'），
$（此）.data（'lng'）
),
};
var marker=new google.maps.marker({
地图：地图，
位置：location.latLng，
});
//注册点击事件
$（此）。在（'单击'，函数（）上）{
单击标记（$（this.data（'region'））；
});
//将标记和区域推送到标记数组
推({
“标记”：标记，
'region'：$（this.data（'region'））
});
});
}
功能点击标记（区域）{
//循环标记数组
对于（var i=0；i
#地图画布{
高度：150像素；
}

标记1-WM
标记2-WM
标记3-SE
标记4-SE
将（地图）标记添加到包含区域的数组中。单击DIV时，在markers数组中循环，并对具有不同区域的所有标记执行
marker.setMap（null）
。这个问题在这里已经被问过很多次了……类似于完美，正是我想要的！
<div class="marker" data-lat="52.559437" data-lng="-2.1493073" data-region="West Midlands"></div>
<div class="marker" data-lat="51.646145" data-lng="-0.45614472" data-region="South East"></div>

var center = new google.maps.LatLng(51.5280359,-0.1304897);

function initialize_map() {  
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };     
    var markerBounds = new google.maps.LatLngBounds();     
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

    var isDraggable = w > 480 ? true : false;
    var mapOptions = {
    zoom: 8,
    center: center,
    //draggable: isDraggable,
    //mapTypeControl: false,
    //draggable: false,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    scrollwheel: true,
    navigationControl: true,
    streetViewControl: true,
    disableDefaultUI: true
  };
  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

    // Multiple Markers

// Loop through our array of markers & place each one on the map  
$('.marker').each(function() {     
    var location = {
        latLng: new google.maps.LatLng(
            $( this ).data( 'lat' ),
            $( this ).data( 'lng' )
        ),
        //title: $( this ).find( 'h2' ).html()
    };

    new google.maps.Marker( {
        map: map,
        position: location.latLng,
        //title: $( this ).data( 'desc' )
    } );

    markerBounds.extend( location.latLng );
});

// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(14);
    google.maps.event.removeListener(boundsListener);
});            

    var styles = [
        /* Black & White {"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]} */
        /* Colour*/ {"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"saturation":"-63"},{"lightness":"23"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"saturation":"-100"},{"lightness":"25"}]},{"featureType":"landscape.natural.terrain","elementType":"geometry.fill","stylers":[{"saturation":"0"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"saturation":"0"},{"color":"#95bf97"},{"lightness":"59"}]},{"featureType":"poi.school","elementType":"geometry.fill","stylers":[{"lightness":"5"},{"hue":"#ff0000"},{"saturation":"-100"}]},{"featureType":"poi.sports_complex","elementType":"geometry.fill","stylers":[{"lightness":"5"},{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"saturation":"-85"},{"lightness":"12"}]}
    ];

map.setOptions({styles: styles});

}

initialize_map(); 

}