title: Google maps places: Adding placeDetails to click method of selected place
body: <p>I got to work in sync my custom markers and markers from google places query. But i am having a hard time to figure out how to get details of a marker upon click with number,photo etc.</p>
  
  <p>Basically i want to access all or a big amount of details from getDetails() method to access them when a click is triggered upon the marker and show them in the box of a marker for further use</p>
  
  <pre><code>//map options
      var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: new google.maps.LatLng(46.055625, 14.504408),
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  var infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  
  //adding collection of stored markers
  function addMyMarkers() {
  for (var i = 0; i &lt; locations.length; i++) {
      placeMarker(new google.maps.LatLng(locations[i][1], locations[i][2]), locations[i][0]);
    }
  }
  //query for getting place markers
  function addFromSearch(request) {
      service.nearbySearch(request, function(results, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
              for (var i = 0; i &lt; results.length; i++) {
                  $('#json').append($.toJSON(results[i]) + '&lt;br&gt;&lt;br&gt;');
                  //$("#debug").append("&lt;img src='" + results[i].icon + "' /&gt;")
                  //results[i].reference
                  placeMarker(results[i].geometry.location, results[i].name,results[i].icon,results[i].photos);
                  //google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
              }
          }
      });
  }
  
  //function for placing icon with content, custom icon, etc...
  function placeMarker(location, content,icon) {
  var image;
  if (icon) {
      image = {
          url: icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
      };
  }
  //marker properties
  var marker = new google.maps.Marker({
      position: location,
      map: map,
      icon: image
  });
  
  
  //click listener
  //service.getDetails(request, function(details, status) {
  
  google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(content);
       // infowindow.setContent(details.name + "&lt;br /&gt;" + details.formatted_address +"&lt;br /&gt;" + details.website + "&lt;br /&gt;" + details.rating + "&lt;br /&gt;" + details.formatted_phone_number);
      infowindow.open(map, this);
  });
  
  
  }
  </code></pre>
  
  <p>I hope i made a good first post on stackoverflow,  I tried to search as thorougly as i can to find the answer but didn't succeed. 
  From Google API ref: <a href="https://developers.google.com/maps/documentation/javascript/examples/place-details" rel="nofollow">https://developers.google.com/maps/documentation/javascript/examples/place-details</a></p>