Javascript 谷歌地图列表类似于Airbnb

我希望有人能帮助我。我没有足够的谷歌api和jquery知识来实现我所需要的

我有一个谷歌地图，你可以在这里看到一个演示 该脚本使用infobox，每个点都按类别过滤，等等

我需要的是能够从外部地图列表（从HTML）中执行一些操作：打开特定点的气泡（并关闭已打开的+地图居中），或反弹气泡或高亮显示特定标记。我的意图是创建一个类似（更简单）的谷歌地图位置列表，比如Airbnb。如果在地图外的HTML列表中，每个点都可以是一个href，可以通过和id或数据属性打开特定的气泡…如“name\u point”。但我不知道怎么做

这是地图的代码：

(function(A) {

    if (!Array.prototype.forEach)
        A.forEach = A.forEach || function(action, that) {
                for (var i = 0, l = this.length; i < l; i++)
                    if (i in this)
                        action.call(that, this[i], i, this);
            };

})(Array.prototype);

var
    mapObject,
    markers = [],
    markersData = {
        'Bars': [
            {
                type_point: 'Wine bar',
                location_latitude: 43.773781,
                location_longitude: 11.257206,
                map_image_url: 'img/thumb_map_2.jpg',
                rate: 'Superb 7.5',
                name_point: 'Astor Cafe',
                description_point: 'Piazza del Duomo, 20/R',
                get_directions_start_address: '43.773460, 11.255985',
                phone: '+3934245255',
                url_detail: 'single_tour.html'
            },
            {
                type_point: 'Pub - Wine bar',
                location_latitude: 43.772238,
                location_longitude: 11.252205,
                map_image_url: 'img/thumb_map_3.jpg',
                rate: 'Superb 7.5',
                name_point: 'Uncle Jimmy',
                description_point: 'Via dei Pescioni,10',
                get_directions_start_address: '43.773460, 11.255985',
                phone: '+3934245255',
                url_detail: 'single_tour.html'
            }
        ]

    };


var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(43.773460, 11.255985),
    mapTypeId: google.maps.MapTypeId.ROADMAP,

    mapTypeControl: false,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    panControl: false,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    scrollwheel: false,
    scaleControl: false,
    scaleControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    },
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },

};

var marker;
mapObject = new google.maps.Map(document.getElementById('map'), mapOptions);
for (var key in markersData)
    markersData[key].forEach(function (item) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
            map: mapObject,
            icon: 'img/pins/' + key + '.png',
        });

        if ('undefined' === typeof markers[key])
            markers[key] = [];
        markers[key].push(marker);
        google.maps.event.addListener(marker, 'click', (function () {
            closeInfoBox();
            getInfoBox(item).open(mapObject, this);
            mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude));
        }));

    });

function hideAllMarkers () {
    for (var key in markers)
        markers[key].forEach(function (marker) {
            marker.setMap(null);
        });
};

function closeInfoBox() {
    $('div.infoBox').remove();
};

function getInfoBox(item) {
    return new InfoBox({
        content:
        '<div class="marker_info" id="marker_info">' +
        '<img src="' + item.map_image_url + '" alt=""/>' +
        '<span>'+
        '<span class="infobox_rate">'+ item.rate +'</span>' +
        '<h3>'+ item.name_point +'</h3>' +
        '<em>'+ item.type_point +'</em>' +
        '<strong>'+ item.description_point +'</strong>' +
        '<a href="'+ item.url_detail + '" class="btn_infobox_detail"></a>' +
        '<form action="http://maps.google.com/maps" method="get" target="_blank"><input name="saddr" value="'+ item.get_directions_start_address +'" type="hidden"><input type="hidden" name="daddr" value="'+ item.location_latitude +',' +item.location_longitude +'"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Get directions</button></form>' +
        '<a href="tel://'+ item.phone +'" class="btn_infobox_phone">'+ item.phone +'</a>' +
        '</span>' +
        '</div>',
        disableAutoPan: true,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(35, -175),
        closeBoxMargin: '5px -28px 0 0',
        closeBoxURL: "img/close_infobox.png",
        isHidden: false,
        pane: 'floatPane',
        enableEventPropagation: true
    });
};

（功能（A）{
if（！Array.prototype.forEach）
A.forEach=A.forEach | |函数（动作，即）{
for（var i=0，l=this.length；i”+item.description_point+””+
'' +
“了解方向”+
'' +
'' +
'',
是的，
最大宽度：0，
pixelOffset：新的google.maps.Size（35，-175），
closeBoxMargin:'5px-28px 0'，
closeBoxURL:“img/close_infobox.png”，
伊希登：错，
窗格：“浮动窗格”，
enableEventPropagation:true
});
};

似乎您在

标记

数组中保留了所有标记的引用。您可以在任何标记上触发

单击

事件以模拟单击。这样，信息框将为marker打开，地图将在那里居中

因此，创建如下函数：

function onHtmlClick(key){
     google.maps.event.trigger(markers[key], "click");
}

其中，

键

是要在

标记

数组中弹出的标记的索引

在html元素上，您只需调用函数，类似于：

<div onclick="onHtmlClick(1)">...</div> 

这意味着您必须更新

onclick

侦听器和函数：

<div onclick="onHtmlClick('Bars', 1)">...</div> 


function onHtmlClick(location_type, key){
     google.maps.event.trigger(markers[location_type][key], "click");
}

。。。
函数onHtmlClick（位置\类型，键）{
google.maps.event.trigger（标记[位置类型][键]，“点击”）；
}

---

工作小提琴：

可能重复的可能重复的可能重复的我已经编辑了我的答案。包括拉小提琴。很高兴我能帮忙。如果答案解决了你的问题，请接受/投赞成票。

<div onclick="onHtmlClick('Bars', 1)">...</div> 


function onHtmlClick(location_type, key){
     google.maps.event.trigger(markers[location_type][key], "click");
}