missing ] after element list for google maps event object

Question

I'm trying to call moreInfo() function on the onclick event and to give it information about the click event.

here are code samples:

google.maps.event.addListener(SomeArea, 'click', showTB);

function showTB(event) {

    //content has the map click event
    var contentString = event.latLng +
        '<br>' + '<button onclick="moreInfo('+event+')">More</button>';


    infoWindow.setContent(contentString);
}

here is relevant function moreInfo

function moreInfo(e){

    var overlayContent = e.latLng
    document.getElementById("content").innerHTML = overlayContent;
}

firebug output:

SyntaxError: missing ] after element list

moreInfo([object Object])

How can I fix this?

Answer 1

the content for an infoWindow may also be a DOMNode.

Create a DOMNode and insert the button into this node, then you'll be able to apply a click-listener to the button(and pass any type of argument):

function showTB(event) {

  var contentElement = document.createElement('div'),
      btn            = document.createElement('button');
  contentElement.appendChild(document.createTextNode(event.latLng));
  contentElement.appendChild(document.createElement('br'));
  contentElement.appendChild(btn);
  btn.appendChild(document.createTextNode('More'));
  google.maps.event.addDomListener(btn,'click',function(){ moreInfo(event);})
  infoWindow.setContent(contentElement);

}

Demo: http://jsfiddle.net/doktormolle/N5Etg/