Dodawanie zdarzenia do elementu wewnątrz Google Maps API InfoWindow

Question

Dodawanie zdarzenia do elementu wewnątrz Google Maps API InfoWindow

Chcę umieścić formularz z polem wprowadzania i przycisk submit wewnątrz Google Maps API (v3) InfoWindow.

Przy zgłoszeniu chciałbym wywołać funkcję, która inicjuje usługę directions używając adresu wpisanego w polu input.

Oto Mój kod (obecnie testuję tylko, czy zdarzenie directions jest wywoływane. Napisałem pełne Zdarzenie getDirections() i mogę potwierdzić, że działa i zwraca wskazówki po prawidłowym wywołaniu):

Próbowałem dodać słuchacza zdarzeń używanie MooTools, jak to:

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();
}

Ponieważ używam MooTools gdzie indziej na mojej stronie, umieszczam cały kod w window.addEvent('load', function(){...});

Zwróć uwagę na ślad konsoli dbug.log($("map-form"));, który poprawnie wyprowadza element formularza, ale zdarzenie nie uruchamia się.

Dodałem to samo zdarzenie do innego formularza (z innym ID) w DOM i działa dobrze.

Więc, jeśli MooTools może znaleźć element i rzekomo dodać detektor zdarzeń, co uniemożliwia wywołanie zdarzenia? Czy to kwestia zakresu?

22

javascript google-maps-api-3 infowindow mootools mootools-events

Author: timwjohn, 2011-06-17

Source

1 answers

score 47 · Accepted Answer

Nie wygląda to na problem z zakresem. getDirections jest w tym samym zakresie.

To sprawa jajko vs kura. ostatecznie-twój ciąg html nie znajduje się w DOM, więc nie możesz jeszcze dodawać do niego zdarzeń ani odwoływać się do elementów z niego. okno info jest nieco asynchroniczne, więc musisz się upewnić, że content div jest dołączony. Lub musisz użyć delegacji zdarzeń.

Wzorzec zdarzeń dostarczany przez google przydaje się, aby dołączyć obsługę przesyłania do div domready, Jak więc:

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);

Przetestowany i działa. alternatywnie, możesz dołączyć żądło zawartości do dom jako potomek jakiegoś ukrytego div, dodać zdarzenie, a następnie przekazać div jako zawartość, ponieważ obsługuje wskazywanie na węzeł.

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

Alternatywnie możesz użyć delegacji zdarzeń

Np.

topnode.addEvent('submit:relay(#map-form)', function(e){ }); - lub równoważne jQuery, na przykład $(document).on('submit', '#map-form', fn)