Google Search Places API with Map

by realhunts

HTML

<script src="https://maps.google.com/?ll=43.75331,-79.58657,19"></script>
<div id="map"></div>

<div class="photos-section" id="img-container"></div>

CSS

body {         
    font:14px sans-serif;           
} 
input {
    margin: 0.6em 0.6em 0; 
    width:398px;
}
#map{         
    height: 400px;         
    width: 100%;         
    margin: 0.6em;       
}

JavaScript

$(function(){     
 
 var map = new google.maps.Map(document.getElementById('map'), {
			center: {lat: 43.753310, lng: -79.586570},
			zoom: 13
		  });
 
var request = {
  placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
};

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    createPhoto(place);
  }
}

function createPhoto(place) {
  var photos = place.photos;

  if (!photos) {
    return;
  }
  var img = document.createElement("img")
 
  for (var i=0;i<photos.length;i++){
    img.src = photos[i].getUrl({'maxWidth': 100, 'maxHeight': 100});
   document.getElementById("img-container").appendChild(img.cloneNode(true)); 
  }
}
});