Function calls within InfoWindows

Question

Often I have maps with a whole lot of markers (let's say representing shops). I have infowindows that display basic info on the shop represented by the marker, then, on the infoWindow HTML I like to put a button that, for example, says "Details". The html of the infowindow is simple.. the html of the info window would include an

input type="button" value="Show More" onclick="showMore(' + shopId + ');

The relevant shopId would be obviously different for every marker...

The problem is that the showMore function has to be declared as a global function to the javascript otherwise the infowindow doesn't find it.

Lets say that all the code (generating map, placing markers, declaring infowindows, etc) is in a function called function showShops() {} , and the showMore(id) function is inside the showShops() function, HOw can I tell the "onclick" event to call the showMore() function inside the showShops function?

Just to check my code, I've changed it to onclick="alert(' + shopId + ') .. and I correctly get an alert with the relevant shop id..

Answer 1

The content of a infowindow may either be a string or a node.

To achieve it you must use a node that will be created inside the scope of showShops()

Sample-creation of such a node:

var content = document.createElement('div');
content.innerHTML = 'some text<br/>';

var button = content.appendChild(document.createElement('input'));
button.type = 'button';
button.value = 'click me!';

google.maps.event.addDomListener(button,'click', function(){showMore(id)});

Simple Demo: http://jsfiddle.net/doktormolle/8ZsSp/