Google Maps API v3 - clickable text to zoom to marker and open infoWindow

Question

I'm working on a project that uses map marker clusters with a 127 markers. What I need help with is getting an infoWindow to open when a visitor clicks on a text link in a list of markers. Currently, clicking the text zooms to the marker but does not open the infoWindow at the same time. Clicking the marker does open the infoWindow. I have added a comment in the code to point out where the list of markers is being generated. The comment is // text list of clickable markers.

Unfortunately, the website is under development and not visible publicly. Let me know if there is any other information that would help you help me. Thanks in advance.

var globalMarker = [];
var map;

function initialize() {
    var center = new google.maps.LatLng(35.4214, -15.6919);
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 1,
        center: center,
        disableDoubleClickZoom: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var markers = [];
    var infowindow = new google.maps.InfoWindow();
    for (i = 0; i < 127; i++) {
        var dataChapters = data.chapters[i];
        var latLng = new google.maps.LatLng(dataChapters.latitude, dataChapters.longitude);
        marker = new MarkerWithLabel({
            position: latLng,
            draggable: true,
            raiseOnDrag: true,
            map: map,
            labelContent: "<strong>" + dataChapters.name + "<\/strong>" + "<br />" + dataChapters.description + "<br /><br />", // label for cluster view.
            labelAnchor: new google.maps.Point(30, 0),
            labelVisible: false,
            labelClass: "labels", // the CSS class for the label
            labelStyle: {
                opacity: 0.75
            }
        });
        markers.push(marker);
// text list of clickable markers
        makeDiv(i, 15, dataChapters.rank + ")&nbsp;" + "<span class=\"chapterlink\">" + dataChapters.name + "<\/span>" + "<br />");
        google.maps.event.addListener(markers[i], 'click', function (e) {
            infowindow.setContent(this.labelContent); // label for  pin.
            infowindow.open(map, this);
        });
    }
    var clusterOptions = {
        zoomOnClick: true
    };
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
    globalMarker = markers.slice();
    google.maps.event.addListener(markerCluster, 'clusterclick', function (cluster) {
        var content = '';
        // Convert lat/long from cluster object to a usable MVCObject
        var info = new google.maps.MVCObject;
        info.set('position', cluster.center_);
        //----
        //Get markers
        var markers = cluster.getMarkers();
        var titles = "";
        //Get all the titles
        for (var i = 0; i < markers.length; i++) {
            titles += markers[i].labelContent + "\n";
        }
        //---
        infowindow.close();
        infowindow.setContent(titles); //set infowindow content to titles
        infowindow.open(map, info);
        google.maps.event.addListener(map, 'zoom_changed', function () {
            infowindow.close();
        });
    });
}

function makeDiv(index, zoomLevel, content) {
    document.getElementById("sidebar").innerHTML += '<div class="child" onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' </div>';
}

function zoomIn(index, zoomLevel) {
    map.setCenter(globalMarker[index].getPosition());
    map.setZoom(zoomLevel);
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

尝试将其添加到zoomIn() ：

google.maps.event.trigger(globalMarker[index],'click');