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..

Brian Burns · Accepted Answer · 2019-03-30 10:52:08Z

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/

Very cool. Didn't know GMaps let's you use nodes instead of strings. Learned something new. Thanks!

Collectives™ on Stack Overflow

Function calls within InfoWindows

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related