javascript - personalizar - Agregar evento a elemento dentro de Google Maps API InfoWindow

multiple infowindows google maps

Question

Quiero poner un formulario con el campo de entrada y el botón enviar dentro de una API de Google Maps (v3) InfoWindow.

Cuando lo envíe, me gustaría llamar a una función que inicia el servicio de indicaciones utilizando la dirección ingresada en el campo de entrada.

Este es mi código (en este momento solo estoy probando si se está disparando el evento de instrucciones. He escrito el evento getDirections() completo y puedo confirmar que funciona y devuelve indicaciones cuando se dispara correctamente):

Intenté agregar un detector de eventos usando MooTools, como este:

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

Como estoy usando MooTools en otro lugar de mi sitio, puse todo el código en window.addEvent(''load'', function(){...});

Tenga en cuenta la traza de la consola dbug.log($("map-form")); que está emitiendo correctamente el elemento de formulario, pero el evento no se está disparando.

He agregado el mismo evento a otro formulario (con ID diferente) en el DOM y funciona bien.

Entonces, si MooTools puede encontrar el elemento y supuestamente agregar el detector de eventos, ¿qué impide que se active el evento? ¿Es esto un problema de alcance?

Answer 1

no parece un problema de alcance. getDirections está en el mismo alcance.

esto es un caso de huevo vs pollo. en última instancia, su cadena de html no está en el DOM, por lo que no puede agregar eventos todavía o elementos de referencia de él. la ventana de información es ligeramente asincrónica, por lo que debe asegurarse de que se adjunta el contenido div. O bien, debe usar la delegación de eventos.

el patrón de evento que Google proporciona es útil para adjuntar el controlador de envío en el domready del div como 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);

probado y trabajando. alternativamente, puede adjuntar el sting de contenido en el dom como hijo de algún div oculto, agregar el evento y luego pasar el div como el contenido, ya que admite que se lo apunte a un nodo.

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

alternativamente, puede usar la delegación de eventos

p.ej.

topnode.addEvent(''submit:relay(#map-form)'', function(e){ }); - o el equivalente jQuery, por ejemplo $(document).on(''submit'', ''#map-form'', fn)