Получите инфобокс на карте, чтобы отобразиться при нажатии ссылки за пределами карты.

Question

Мне было интересно, если кто-то знает, как я могу сделать «ссылки», находящиеся под картой, взаимодействовать с картой (см. Рисунок ниже).

Предположим, я хочу щелкнуть по Джорджу. Затем инфобокс на карте должен быть виден. Если я нажимаю на другой, то, что один должен быть виден, и т.д ..

HTML, со ссылками:

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

HTML, от Infobox:

<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

Есть ли необходимость разрешить одновременное открытие нескольких информационных окон? Если нет, я бы рекомендовал только иметь один элемент информационного окна. С одним информационным окном все, что вам нужно будет сделать, это прослушивать события (события) кликов, а затем щелкнуть, после чего установить позицию и содержимое информационного окна, а затем открыть.

Google Maps JavaScript API documentation имеет пример Listening to DOM events, который показывает, как взаимодействовать с картой с элементами вне карты (в вашем случае ссылки под картой).

Псевдокод, приведенный ниже, показывает очень простой обзор того, как зарегистрировать прослушиватель событий 'click', который обновляет и отображает информационное окно. Для получения дополнительной информации о 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); 
});