javascript - Adding event to element inside Google Maps API InfoWindow

Question

I want to put a form with input field and submit button inside a Google Maps API (v3) InfoWindow.

When submitted I would like to call a function that initiates the directions service using the address entered into the input field.

Here's my code (I'm currently only testing whether the directions event is being fired. I've written the full getDirections() event and can confirm it works and returns directions when fired properly):

I tried adding an event listener using MooTools, like this:

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

As I'm using MooTools elsewhere in my site, I put all the code in window.addEvent('load', function(){...});

Note the console trace dbug.log($("map-form")); which is correctly outputting the form element, but the event isn't firing.

I've added the same event to another form (with different ID) in the DOM and it works fine.

So, if MooTools can find the element and supposedly add the event listener, what's preventing the event from firing? Is this a scope issue?

Answer 1

it does not look like a scope issue. getDirections is in the same scope.

this is an egg vs chicken case. ultimately - your string of html is not in the DOM so you cannot add events to it just yet or reference elements from it. the info window is slightly asynchronous so you need to make sure the content div is attached. Or, you need to use Event delegation.

the event pattern google provides comes in handy to attach the submit handler on the div's domready like so:

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

tested and working. alternatively, you can attach the content sting into the dom as child of some hidden div, add the event and then pass on the div as the content as it supports being pointed to a node.

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

alternatively, you can use event delegation

eg.

topnode.addEvent('submit:relay(#map-form)', function(e){ }); - or the equivalent jQuery, for instance $(document).on('submit', '#map-form', fn)