Google Maps API V3，点击时打开 infoWindow答案

【问题标题】：Google Maps API V3, infoWindow open on clickGoogle Maps API V3，点击时打开 infoWindow
【发布时间】：2014-04-04 05:57:38
【问题描述】：

我一直在尝试在 Google Maps API 上运行一些东西。

我想要实现的是，当您单击底部的 html 按钮时，它们会触发 infoWindow 的显示。我有点不确定将 infowindow open 函数放在哪里，我查看了其他示例，但它们似乎在我下面的代码中不起作用。

这是我到目前为止所得到的： jsfiddle：http://jsfiddle.net/7jJZK/4/

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);


    // iniitial location + settings
    var map;
    function initialize() {
        var myOptions = {
            disableDefaultUI: true,
            zoom: 16,
            center: new google.maps.LatLng(45.376187, -0.525799),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    }


    // locations
    initialize();
    var locations = [
        ['hello', 45.376187, -0.525799],
        ['2', 56.376187, -0.525799],
        ['3', 53.376187, -0.525799],
        ['4', 54.176187, -0.525799],
        ['5', 52.376187, -0.525799]
    ];

    // infowindow
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

    // panTo
    $("#location-menu").on("click", "#location1", function() {
        var laLatLng = new google.maps.LatLng(45.376187, -0.525799);
        map.panTo(laLatLng);
    });
    $("#location-menu").on("click", "#location2", function() {
        var laLatLng = new google.maps.LatLng(56.376187, -0.525799);
        map.panTo(laLatLng);
    });
    $("#location-menu").on("click", "#location3", function() {
        var laLatLng = new google.maps.LatLng(53.376187, -0.525799);
        map.panTo(laLatLng);
    });
    $("#location-menu").on("click", "#location4", function() {
        var laLatLng = new google.maps.LatLng(54.176187, -0.525799);
        map.panTo(laLatLng);
    });
    $("#location-menu").on("click", "#location5", function() {
        var laLatLng = new google.maps.LatLng(52.376187, -0.525799);
        map.panTo(laLatLng);
    });

});

<div id="map_canvas" style="width: 990px; height: 330px"></div>
<div id="location-menu">
<input type="button" id="location1" value="location 1" />
<input type="button" id="location2" value="location 2"/>
<input type="button" id="location3" value="location 3" />
<input type="button" id="location4" value="location 4"/>
<input type="button" id="location5" value="location 5"/>
</div>

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

创建一个全局数组（“gmarkers”）

   var gmarkers = [];

将您的标记推入其中

   gmarkers.push(marker);

使用 google.maps.event.trigger(, "click") 打开信息窗口

$("#location-menu").on("click", "#location1", function() {
  google.maps.event.trigger(gmarkers[0], "click");
  var laLatLng = new google.maps.LatLng(45.376187, -0.525799);
  map.panTo(laLatLng);
});

working fiddle

【讨论】：