從谷歌地圖 API 外部控制標記信息窗口

Question

當點擊地圖外的元素時，我試圖打開谷歌地圖標記的信息窗口。 我見過幾個類似的問題，但沒有看到有效的答案。 這是我的代碼：

html：

<div id="map_canvas"></div>
<div id="names_div"></div>

腳本：

var locations = [
  ['Bondi Beach', -33.890542, 151.274856],
  ['Coogee Beach', -33.923036, 151.259052],
];

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var names_html = "";

  for (i = 0; i < locations.length; i++) {
  names_html += " " +  "<a href='javascript:myclick(" + locations.length + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>" ;
  };

  document.getElementById("names_div").innerHTML = names_html;

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));

  }

  function myclick(i) {
    google.maps.event.trigger(locations[i], "click");
  }

它是“names_html +=...”行和“function myclick(i) {...”之間的交互，這導致了我認為的問題。

此外，我只能讓 names_div 的 html 填充與標記循環的單獨循環一起工作。 也可能是這個問題！

謝謝，非常感謝幫助。

Answer 1

我在發布的代碼中收到一個 javascript 錯誤： Uncaught TypeError: Cannot read property '__e3_' of undefined 。 有兩個問題：

1. locations[i]不是對google.maps.Marker對象的引用（您不能在其上觸發click事件並期望它做任何有用的事情）。 您需要保留對標記的引用（例如在名為gmarkers的數組中，然后在這些標記上觸發click事件：

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

2. locations.length永遠不會改變。 您需要將側邊欄鏈接編碼為：

for (i = 0; i < locations.length; i++) {
  names_html += " " + "<a href='javascript:myclick(" + i + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>";
};

工作示例（不基於您的代碼）

概念證明小提琴

代碼片段：

 var locations = [ ['Bondi Beach', -33.890542, 151.274856], ['Coogee Beach', -33.923036, 151.259052], ]; var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 10, center: new google.maps.LatLng(-33.92, 151.25), mapTypeControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }); var names_html = ""; for (i = 0; i < locations.length; i++) { names_html += " " + "<a href='javascript:myclick(" + i + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>"; }; document.getElementById("names_div").innerHTML = names_html; var infowindow = new google.maps.InfoWindow(); var marker, i; var gmarkers = []; 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)); gmarkers.push(marker); } function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); }

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100%; width: 80%; float: left; } #names_div { height: 100%; width: 100%; }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div> <div id="names_div"></div>