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?

Solution

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)

Comments

[timwjohn]

Excellent - thank you! I think I prefer your first suggestion rather than having a hidden div. I didn't realise divs dispatch domready events. I'm still quite new to JavaScript, but loving it.

[Gerhard Wesp]

Something may have changed in the meantime. This works for me, but only if document.id() is replaced by document.getElementById() and addEvent() by addEventListener().

[Dimitar Christoff]

thats because the original answer was to do with MooTools.

[dev_khan]

Dimitar Christoff The mentioned link of GOOGLE is giving 404

[rgins16]

Excellent. Thank you so much. This was the exact problem I've been having trouble solving.

[Dimitar Christoff]

@dev_khan they moved it. developers.google.com/maps/documentation/javascript/infowind‌​ows - content is the bit that matters

[Aesthetic]

Thanks for sharing, It shows that DOM of each info window is build on click event of the marker.