地図のインフォボックスを取得して地図外のリンクをクリックすると表示されます

Question

マップの下にある「リンク」をどのようにして地図とやりとりできるかは、誰かが知っていますか（下記画像参照）。

私はジョージをクリックしたいとしましょう。マップ内の情報ボックスが表示されるはずです。私は別のをクリックすると、その一つはなど、目に見えるべきであるということ。..

HTMLリンクを持つ：

<ul> 
    <li><a>George</a></li> 
    <li><a>Hoppe</a></li> 
    <li><a>Café Herengracht</a></li> 
</ul> 

HTMLインフォボックスから：

<div> 
    <div class="infoBox"></div> 
// here comes another infobox (when clicked on icon) 
// here comes another infobox (when clicked on icon) 
// here comes another infobox (when clicked on icon) 
// etc.. 
</div> 

他infoboxesです今はDOM内ではありません。あなたが地図上でそれらをクリックしたときだけです！

JavaScriptがどこにあるのかわかりません。私が知っていれば、インフォボックスをDOMに表示する機能を認識しているとは思いません。

私はAvade Wordpressのテーマでは、このマップのショートを使用しています： https://avada.theme-fusion.com/google-maps/

感謝を！

Answer 1

一度に複数の情報ウィンドウを開く必要がありますか？そうでない場合は、1つの情報ウィンドウ要素しか持たないことをお勧めします。 1つの情報ウィンドウでは、クリックイベントを待ち受けるだけで、情報ウィンドウの位置とコンテンツをクリックして開いてから開く必要があります。

Google Maps JavaScript API documentationにはListening to DOM eventsの例があり、マップの外の要素（マップの下にある場合はリンク）でマップとやりとりする方法を示しています。

以下の疑似コードは、情報ウィンドウを更新して表示する「クリック」イベントリスナーを登録する方法の非常に基本的な概要を示しています。 Google Maps Info Windowの詳細については、example on info windowsをご覧ください。

HTML

<ul> 
    <li><a id="mapTriggerGeorge">George</a></li> 
</ul> 

はJavaScript

var infowindow = new google.maps.InfoWindow({ 
    content: 'Hello World!' 
}); 

var georgeTrigger = document.getElementById('mapTriggerGeorge'); 

google.maps.event.addDomListener(georgeTrigger, 'click', function() { 
    infoWindow.setContent('Hello World from George!'); 
    infowindow.open(map, marker); 
});