Добавление события к элементу внутри Google Maps API InfoWindow

Я хочу поместить форму с полем ввода и кнопкой отправки в InfoWindow API Google Maps (v3).

При отправке я хотел бы вызвать функцию, которая инициирует службу маршрутов, используя адрес, введенный в поле ввода.

Вот мой код (в настоящее время я только проверяю, запускается ли событие маршрутов. Я написал полное событие getDirections() и могу подтвердить, что оно работает и возвращает направления при правильном запуске):

Я попытался добавить прослушиватель событий с помощью MooTools, например:

var infoWindowContent   = "<b>Get Directions From...</b><br />"
                        + "<form id='map-form'>"
                        + "Address/Postcode: <input id='map-from-address' type='text' />"
                        + "<input type='submit' id='map-go' value='Go' />"
                        + "</form>";

var infoWindow = new google.maps.InfoWindow({
    content: infoWindowContent
});

google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map, marker);
    dbug.log($("map-form"));
    $("map-form").addEvent("submit", getDirections);
});

function getDirections(event)
{
    dbug.log("getDirections");
    event.stop();
}

Поскольку я использую MooTools в другом месте на своем сайте, я поместил весь код в window.addEvent('load', function(){...});

Обратите внимание на трассировку консоли dbug.log($("map-form"));, которая правильно выводит элемент формы, но событие не запускается.

Я добавил то же событие в другую форму (с другим идентификатором) в DOM, и все работает нормально.

Итак, если MooTools может найти элемент и предположительно добавить прослушиватель событий, что мешает запуску события? Это проблема масштаба?


javascript google-maps-api-3 infowindow mootools mootools-events
person timwjohn    schedule 16.06.2011    source источник

Ответы (1)


arrow_upward
49
arrow_downward

это не похоже на проблему масштаба. getDirections находится в той же области.

это случай яйца против курицы. в конечном счете, ваша строка html не находится в DOM, поэтому вы пока не можете добавлять к ней события или ссылаться на элементы из нее. информационное окно немного асинхронно, поэтому вам нужно убедиться, что содержимое div прикреплено. Или вам нужно использовать делегирование событий.

шаблон события, который предоставляет Google, пригодится, чтобы прикрепить обработчик отправки к div domready следующим образом:

var infoWindowContent = [
    "<b>Get Directions From...</b><br />",
    "<form id='map-form'>",
    "Address/Postcode: <input id='map-from-address' type='text' />",
    "<input type='submit' id='map-go' value='Go' />",
    "</form>"
].join("");


var info = new google.maps.InfoWindow({
    content: infoWindowContent
});

google.maps.event.addListener(info, 'domready', function() {
    document.id("map-form").addEvent("submit", function(e) {
        e.stop();
        console.log("hi!");
    });
});

info.open(map, marker);

проверено и работает. в качестве альтернативы вы можете прикрепить содержимое к dom как дочерний элемент некоторого скрытого div, добавить событие, а затем передать div как содержимое, поскольку оно поддерживает указание на узел.

https://developers.google.com/maps/documentation/javascript/infowindows

в качестве альтернативы вы можете использовать делегирование событий

eg.

topnode.addEvent('submit:relay(#map-form)', function(e){ }); - или аналогичный jQuery, например $(document).on('submit', '#map-form', fn)

person Dimitar Christoff    schedule 16.06.2011
comment
Отлично - спасибо! Я думаю, что предпочитаю ваше первое предложение, а не скрытый div. Я не понимал, что divs отправляют события domready. Я все еще новичок в JavaScript, но мне это нравится. - person timwjohn; 22.06.2011
comment
Что-то могло измениться за это время. Это работает для меня, но только если document.id() заменен на document.getElementById() и addEvent() на addEventListener(). - person Gerhard Wesp; 13.05.2015
comment
это потому, что первоначальный ответ был связан с MooTools. - person Dimitar Christoff; 14.05.2015
comment
Dimitar Christoff Упомянутая ссылка GOOGLE дает 404 - person dev_khan; 05.05.2016
comment
Отлично. Большое спасибо. Это была именно та проблема, с решением которой у меня возникли проблемы. - person rgins16; 14.07.2016
comment
@dev_khan они его перенесли. developers.google.com/maps/documentation/javascript/infowindows — content немного, что важно - person Dimitar Christoff; 18.07.2016
comment
Спасибо, что поделились, это показывает, что DOM каждого информационного окна строится на событии щелчка маркера. - person Dadan; 16.09.2016