How to fetch hotel name with hotel images from google maps by nearby place API?

Question

I have read all documents for nearby place search APIs and have tried this:

$: 

var amsterdam = new google.maps.LatLng(, ); function initialize() { var mapProp = { center: amsterdam, zoom: 17, scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP };

        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

        var myCity = new google.maps.Circle({
            center: amsterdam,
            radius: 150,
            strokeColor: "#55A82C",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#7cbd22",
            fillOpacity: 0.4
        });

        myCity.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);

    var map1;
    var infowindow;
    var pyrmont = {lat: <?php echo $data['lat'] ?>, lng: <?php echo $data['lng'] ?>};
    function initMap() {

        map1 = new google.maps.Map(document.getElementById('Map'), {
            center: pyrmont,
            zoom: 15
        });
        var service = new google.maps.places.PlacesService(map1);
        service.nearbySearch({
            location: pyrmont,
            radius: 800,
            type: ['lodging'],
            "photos" : [
                {
                    "height" : 426,
                    "html_attributions" : [
                        "\u003ca href=\"https://www.google.com/maps/views/profile/104066891898402903288\"\u003eRhythmboat Cruises\u003c/a\u003e"
                    ],
                    "photo_reference" : pyrmont,
                    "width" : 640
                }
            ]
        }, callback);
    }

    function callback(results, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            var hotelname = '';
            for (var i = 0; i < results.length; i++) {
                var name = results[i]['name'];
                var photo = results[i]['photos']['photo_reference'];
                if(i<6)
                {
                    hotelname += '<span class="">'+name+'</span>';
                    hotelname += '<img src="'+photo+'"/>';
                }
            }
            $("#hotel").html(hotelname);
        }
    }

    google.maps.event.addDomListener(window, 'load', initMap);
</script>

With this example, I found the hotel name, but not the hotel image. I got an object object as hotel image. Please give me some solution for how I can get hotel images from google maps.

Answer 1

From the documentation of PlacePhoto

google.maps.places.PlacePhoto object specification

Represents a photo element of a Place.

Methods

getUrl(opts:PhotoOptions)

Return Value: string

Returns the image URL corresponding to the specified options. You must include a PhotoOptions object with at least one of maxWidth or maxHeight specified.

Properties

height | Type: number | The height of the photo in pixels.

html_attributions | Type: Array | Attribution text to be displayed for this photo.

width | Type: number | The width of the photo in pixels.

To get the URL of a photo for the place, call the objects .getUrl method with the required PhotoOptions argument.

var photo = results[i]['photos'][0].getUrl({maxWidth: 100});

proof of concept fiddle

code snippet:

var map1;
var infowindow;
var pyrmont = {
  lat: -33.867,
  lng: 151.195
};

function initMap() {

  map1 = new google.maps.Map(document.getElementById('Map'), {
    center: pyrmont,
    zoom: 15
  });

  var service = new google.maps.places.PlacesService(map1);
  service.nearbySearch({
    location: pyrmont,
    radius: 800,
    type: ['lodging']
  }, callback);
}

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    var hotelname = '';
    for (var i = 0; i < results.length; i++) {
      // createMarker(results[i]);
      var name = results[i]['name'];
      var photo = null;
      if (results[i].photos && (results[i].photos.length > 0)) {
        var photo = results[i]['photos'][0].getUrl({
          maxWidth: 100
        });
      }
      if (i < 6) {
        hotelname += '<img src="' + photo + '" />';
        hotelname += '<span class="">' + name + '</span><br>';
      }
    }
    $("#hotel").html(hotelname);
  }
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#Map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="hotel"></div>
<div id="Map"></div>