Google place Api PlaceDetails

问题

Hi the below code gives the place search , but it is showing only names i want the complete details of the places in the infobox..the below code isprovided by DR.Molle

http://jsfiddle.net/doktormolle/C5ZtK/

below is the code for retrieving the placedetails but not able to make it working

 var request = { reference: place.reference };
    service.getDetails(request, function(details, status) {
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number);
        infowindow.open(map, this);
      });
    });
  }

i checked the developers page but not able to get much from it Any help would be appreciated

回答1:

Example that gets the place details for the clicked marker:

http://www.geocodezip.com/v3_GoogleEx_place-search_starbucks3.html

code snippet:

var geocoder = null;
var map;
var service;
var infowindow;
var gmarkers = [];
var bounds = null;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: pyrmont,
    zoom: 15
  });
  geocoder.geocode({
    'address': "Seattle, WA"
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var point = results[0].geometry.location;
      bounds = results[0].geometry.viewport;
      var rectangle = new google.maps.Rectangle({
        bounds: bounds,
        fillColor: "#FF0000",
        fillOpacity: 0.4,
        strokeColor: "#0000FF",
        strokeWeigth: 2,
        strokeOpacity: 0.9,
        map: map
      });
      map.fitBounds(bounds);
      var request = {
        bounds: bounds,
        name: "starbucks",
        types: ['establishment']
      };
      infowindow = new google.maps.InfoWindow();
      service = new google.maps.places.PlacesService(map);
      service.search(request, callback);

    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });

}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  var request = {
    reference: place.reference
  };
  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(request, function(place, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        var contentStr = '<h5>' + place.name + '</h5><p>' + place.formatted_address;
        if (!!place.formatted_phone_number) contentStr += '<br>' + place.formatted_phone_number;
        if (!!place.website) contentStr += '<br><a target="_blank" href="' + place.website + '">' + place.website + '</a>';
        contentStr += '<br>' + place.types + '</p>';
        infowindow.setContent(contentStr);
        infowindow.open(map, marker);
      }
    });

  });
  gmarkers.push(marker);
  var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");'>" + place.name + "</a><br>";
  document.getElementById('side_bar').innerHTML += side_bar_html;
}

function openInfoWindow(id) {
  return true;
}

google.maps.event.addDomListener(window, 'load', initialize);

#map {
  height: 400px;
  width: 600px;
  border: 1px solid #333;
  margin-top: 0.6em;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<table border="1">
  <tr>
    <td>
      <div id="map"></div>
    </td>
    <td>
      <div id="side_bar"></div>
    </td>
  </tr>
</table>

来源：https://stackoverflow.com/questions/12580788/google-place-api-placedetails