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 d

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)