CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Dalton Wise
Dalton Wise

Reputation: 3

How to find place details using nearby search in Google places api?

I cannot get the place details to display when each place icon is clicked. I read the documentation and thought I coded it correctly. Anyone have any suggestions? It is also not giving me all of the results that I should get. It only outputs 1 nearby hotel when there are really about 30. Thanks. 

  var map;
  var infowindow;
  function initMap() {
    var messiah = {lat: 40.158350, lng: -76.987454};
    map = new google.maps.Map(document.getElementById('map'), {
      center: messiah,
      zoom: 12
    });

    var marker = new google.maps.Marker({
        position: messiah,
        map: map,
        title: 'Messiah College'
    });

    var request = {
        location: messiah,
        radius: 10000,
        type: ['lodging']
    }
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, callback);
    service.getDetails(request, callback);
  }

  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,
        icon: {
            url: 'http://maps.gstatic.com/mapfiles/circle.png',
            anchor: new google.maps.Point(10, 10),
            scaledSize: new google.maps.Size(10, 17)
        },
        position: place.geometry.location
  });


  var request = { reference: place.place_id };
  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);
  });
});

}

Upvotes: 0

Views: 3619

Answers (1)

wf9a5m75
wf9a5m75

Reputation: 6158

You mistakes a couple of points.

  1. For service.getDetails() method, you pass the place_id for the reference property, but correct is place.reference, not place_id.

  2. You should not call service.getDetails() in for(){...}, because the getDetails method works as async. It means you call many times in a short seconds. (i.e. If you get 10 results, your code calls the getDetails() method in one seconds.) Your code will be rejected by Google, because too many requests in a short period.

    In order to avoid that, you should call the getDetails() method after marker clicking.

:

<!DocType html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      }
      #map {
      width: 100%;
      height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
    <script>
      var map;
      var infowindow;
      var service;

      function initMap() {
          var messiah = {
              lat: 40.158350,
              lng: -76.987454
          };
          map = new google.maps.Map(document.getElementById('map'), {
              center: messiah,
              zoom: 12
          });

          var marker = new google.maps.Marker({
              position: messiah,
              map: map,
              title: 'Messiah College'
          });

          var request = {
              location: messiah,
              radius: 10000,
              type: ['lodging']
          }
          infowindow = new google.maps.InfoWindow();
          service = new google.maps.places.PlacesService(map);
          service.nearbySearch(request, callback);


      }

      function callback(results, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            results.forEach(createMarker);
          }
      }

      function createMarker(place) {
          var placeLoc = place.geometry.location;
          var marker = new google.maps.Marker({
              map: map,
              icon: {
                  url: 'http://maps.gstatic.com/mapfiles/circle.png',
                  anchor: new google.maps.Point(10, 10),
                  scaledSize: new google.maps.Size(10, 17)
              },
              position: place.geometry.location
          });
          marker.addListener('click', function() {

            var request = {
                reference: place.reference
            };
            service.getDetails(request, function(details, status) {

              infowindow.setContent([
                details.name,
                details.formatted_address,
                details.website,
                details.rating,
                details.formatted_phone_number].join("<br />"));
              infowindow.open(map, marker);
            });

          })
      }
      window.onload = initMap;

    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Upvotes: 2

Related Questions