來自Google地圖外部的控制標記infowindow API

Question

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

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 + = ...」 線與「功能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"); 
} 

locations.length永遠不會改變你所需要的。編寫側邊欄鏈接爲：

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

Working example (not based on your code)

proof of concept fiddle

代碼片斷：

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>