i have read documents nearby place search apis , 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 = ''; (var = 0; < 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 example, found hotel name, not hotel image. got object object hotel image. please give me solution how can hotel images google maps.
from documentation of placephoto
google.maps.places.placephoto object specification
represents photo element of place.
methods
geturl(opts:photooptions)
return value: string
returns image url corresponding specified options. must include photooptions object @ least 1 of maxwidth or maxheight specified.
properties
height | type: number | height of photo in pixels.
html_attributions | type: array | attribution text displayed photo.
width | type: number | width of photo in pixels.
to url of photo place, call objects .geturl method required photooptions argument.
var photo = results[i]['photos'][0].geturl({maxwidth: 100}); 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 = ''; (var = 0; < 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>
Comments
Post a Comment