gmaps infowindow.js

function initialize() {
    var map = Gmaps.map.map
    
    var defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(<%= @lat %>, <%= @lon %>),
        new google.maps.LatLng(<%= @lat %>, <%= @lon %>));
  
    map.setZoom(15);
    
    var input = (document.getElementById('place-search'));
    var searchBox = new google.maps.places.SearchBox(input);
    var markers = [];
    google.maps.event.addListener(searchBox, 'places_changed', function() {
      var places = searchBox.getPlaces();

      for (var i = 0, marker; marker = markers[i]; i++) {
        marker.setMap(null);
      }

      markers = [];
      var i, place;
      for (i = 0;place = places[i]; i++) {
        var infowindow = new google.maps.InfoWindow({
          maxWidth: 300
        });
        var image = {
          url: place.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)
        };

//
//  I don't know where or how to set this up to access the data in the infowindow
//
        service = new google.maps.places.PlacesService(map);
        service.getDetails(place, function(p, s) {
          console.log(p)
        });
//
// I can see all the details I need in the console log but no access to it in the marker
//
        var marker = new google.maps.Marker({
          map: map,
          animation: google.maps.Animation.DROP,
          title: place.name,
          icon: image,
          position: place.geometry.location,
          address: place.formatted_address,
          website: place.website, // does not work
          phone: place.formatted_phone_number, // does not work
          rating: place.rating // does not work
        });
        google.maps.event.addListener(marker, 'mouseover', function() {
          infowindow.setContent('<span style="padding: 0px; text-align:left" align="left"><h5>' + this.title + '&nbsp; &nbsp; ' + this.rating
                            + '</h5><p>' + this.address + '<br />' + this.phone + '<br />' +
                            '<a target="_blank" href=' + this.website + '>' + this.website + '</a></p>' );
          infowindow.open(map, this);
        });
        google.maps.event.addListener(marker, 'mouseout', function() {
          infowindow.close(map, this);
        });

        markers.push(marker);
      }

      map.fitBounds(defaultBounds);
      map.setZoom(14);
    });

    google.maps.event.addListener(map, 'bounds_changed', function() {
      var bounds = map.getBounds();
      searchBox.setBounds(bounds);
    });
  }