Как связать маркеры Карт Google с другими элементами?

Question

Используя Google Maps (и JavaScript), я смог легко отобразить несколько маркеров, каждый из которых имеет симпатичное небольшое информационное окно над ними.

//Create map over USA
map = new google.maps.Map2( document.getElementById('map') );
map.setCenter(new GLatLng(38.95940879245423, -100.283203125), 3);

//Create point, then marker, and then add to map
function create_marker(lat, lng, html) {
    var marker = new GMarker( new GLatLng(lat,lng));
    marker.bindInfoWindow(html);
    map.addOverlay(marker);
}

var html = '<div>this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html);

Однако теперь я хочу иметь возможность связывать «щелчки» маркеров с функциями, которые также могут обновлять другие части страницы. Например, я хотел бы иметь боковую панель с копиями содержимого информационного окна маркера. Точно так же Google Maps показывает результаты слева и маркеры справа. Я мог бы даже хотеть, чтобы щелчок содержимого боковой панели открывал данное информационное окно маркера на карте.

Проблема в том, что событие нажатия GMarker пропускает только широту / долготу - и я не уверен, как его использовать, чтобы найти соответствующий div или что-то еще.

Как получить уникальный идентификатор / маркер для каждого маркера?

Answer 1

Назначьте идентификатор каждому маркеру и соответствующему ему элементу на боковой панели. Создайте прослушиватель событий для вызова этого идентификатора. Примерно так:

var html = '<div>this is my text</div>';
var sideHtml = '<div id="1">this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html, 1);
$("#sidebar").append(sideHtml); // Add the text to the sidebar (jQuery)

//Create point, then marker, and then add to map
function create_marker(lat, lng, html, id) {
    var marker = new GMarker( new GLatLng(lat,lng));
    marker.bindInfoWindow(html);
    map.addOverlay(marker);

    GEvent.addListener(marker, 'click', function(latlng) {
        var div = document.getElementById(id); //access the sidebar element
        // etc...
    });
}

См. Также этот вопрос .

Answer 2

Для интересующихся здесь приведен отличный пример элементов l inking dom с маркерами . По сути, вы просто создаете глобальный массив JS, который содержит ссылку на каждый маркерный объект.