Wie kann man den Hotelnamen mit Hotelbildern von Google Maps durch die API in der Nähe abrufen?

Question

Ich habe alle Dokumente für die in der Nähe Ort suchen APIs lesen und haben dieses versucht:

$: 

var amsterdam = new google.maps.LatLng (,); Funktion Initialize() { var mapProp = { Zentrum: Amsterdam, Zoom: 17, Scrollrad: 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> 

Mit diesem Beispiel fand ich den Hotelnamen, aber nicht das Hotelbild. Ich habe ein Objekt Objekt als Hotelbild. Bitte geben Sie mir eine Lösung, wie ich Hotelbilder von Google Maps bekommen kann.

Answer 1

Von documentation of PlacePhoto

google.maps.places.PlacePhoto Objektspezifikation

Stellt ein Fotoelement eines Platzes.

Methoden

getUrl (entscheidet sich: PhotoOptions)

Rückgabewert: string

Gibt die Bild-URL zu den angegebenen Optionen entsprechen. Sie müssen ein PhotoOptions-Objekt mit mindestens einem der Werte maxWidth oder maxHeight angeben.

Eigenschaften

Höhe | Typ: Nummer | Die Höhe des Fotos in Pixeln.

html_attributionen | Typ: Array | Attributionstext, der für dieses Foto angezeigt werden soll.

Breite | Typ: Nummer | Die Breite des Fotos in Pixel.

Um die URL eines Fotos für den Ort, rufen Sie die Objekte .getUrl Methode mit dem erforderlichen PhotoOptions Argument zu bekommen.

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

proof of concept fiddle

Codefragment:

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>