title: How to pass objects in parameters in onclick() event?
body: <p>I have this function:</p>
  
  <pre><code>function createMarkersForPlaces(places, infowindow) {
    for (var i = 0; i &lt; places.length; i++) {
      var place = places[i];
      var marker = new google.maps.Marker({
        map: map,
        title: place.name,
        position: place.geometry.location,
        id: place.place_id,
        animation: google.maps.Animation.DROP
      });
      placeMarkers.push(marker);
      // if user clicks one of the marker, execute getPlaceDetails
      // for that specific place
      marker.addListener('click', function() {
        if (infowindow.marker == this) {
        } else {
          getPlacesDetails(this, infowindow);
        }
      });
      // based on the places above, populate list in html
      $("ul").append("&lt;li&gt;&lt;a href='#' onclick='getPlacesDetails(" + marker + "," + infowindow ")' class='w3-bar-item'&gt;" + place.name + "&lt;/a&gt;&lt;/li&gt;");
    }
  }
  </code></pre>
  
  <p>but this line of code does not work.</p>
  
  <pre><code>$("ul").append("&lt;li&gt;&lt;a href='#' onclick='getPlacesDetails(" + marker + "," + infowindow ")' class='w3-bar-item'&gt;" + place.name + "&lt;/a&gt;&lt;/li&gt;");
  </code></pre>
  
  <p>inside of a function where marker and infowindow are defined, and other than this line of code, the function works perfect. Marker is an object from google.maps.marker, and infowindow is an object from google.maps.InfoWindow. How can I make it work?</p>
  
  <pre><code>function getPlacesDetails(marker, infowindow) {some function...}
  </code></pre>