Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Place Photos

  • This sample demonstrates a basic photo carousel using the Google Maps Places library to display photos for a specific location.

  • It fetches place details like display name, summary, and photos using thefetchFields method.

  • Photos are displayed in a gallery and can be expanded to full size with author attributions included.

  • It uses thegetURI method to retrieve the photo URLs, optionally specifying maximum height or width for resizing.

  • Author attributions are mandatory when displaying photos and are accessed using theauthorAttributions property.

European Economic Area (EEA) developers If your billing address is in the European Economic Area, effective on 8 July 2025, the Google Maps Platform EEA Terms of Service will apply to your use of the Services. Functionality varies by region.Learn more.

Place photos lets you add high quality photographic content to your web pages. Access millions of photos stored in the Places database, and get resizable images using Find Place, Nearby Search, Text Search, Autocomplete, and Place Details.

See the complete example source code

This rudimentary photo carousel displays photos for the specified place, including the required author attributions (shown in the upper left corner of the photo).

TypeScript

asyncfunctioninit(){const{Place}=awaitgoogle.maps.importLibrary('places')asgoogle.maps.PlacesLibrary;// Use a place ID to create a new Place instance.constplace=newPlace({id:'ChIJydSuSkkUkFQRsqhB-cEtYnw',// Woodland Park Zoo, Seattle WA});// Call fetchFields, passing the desired data fields.awaitplace.fetchFields({fields:['displayName','photos','editorialSummary']});// Get the various HTML elements.letheading=document.getElementById('heading')asHTMLElement;letsummary=document.getElementById('summary')asHTMLElement;letgallery=document.getElementById('gallery')asHTMLElement;letexpandedImageDiv=document.getElementById('expanded-image')asHTMLElement;letattributionLabel;// Show the display name and summary for the place.heading.textContent=place.displayNameasstring;summary.textContent=place.editorialSummaryasstring;// Add photos to the gallery.if(place.photos){place.photos?.forEach((photo)=>{constimg=document.createElement('img');constexpandedImage=document.createElement('img');img.src=photo.getURI({maxHeight:380});img.addEventListener('click',(event)=>{event.preventDefault();expandedImage.src=img.src;expandedImageDiv.innerHTML='';expandedImageDiv.appendChild(expandedImage);attributionLabel=createAttribution(photo.authorAttributions);expandedImageDiv.appendChild(attributionLabel);});gallery.appendChild(img);});}// Display the first photo.constimg=document.createElement('img');img.src=place.photos![0].getURI();expandedImageDiv.appendChild(img);attributionLabel=createAttribution(place.photos![0].authorAttributions);expandedImageDiv.appendChild(attributionLabel);// Helper function to create attribution DIV.functioncreateAttribution(attribution){attributionLabel=document.createElement("a");attributionLabel.classList.add('attribution-label');attributionLabel.textContent=attribution[0].displayName;attributionLabel.href=attribution[0].uri;attributionLabel.target='_blank;'returnattributionLabel;}}init();
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

asyncfunctioninit(){const{Place}=awaitgoogle.maps.importLibrary("places");// Use a place ID to create a new Place instance.constplace=newPlace({id:"ChIJydSuSkkUkFQRsqhB-cEtYnw",// Woodland Park Zoo, Seattle WA});// Call fetchFields, passing the desired data fields.awaitplace.fetchFields({fields:["displayName","photos","editorialSummary"],});// Get the various HTML elements.letheading=document.getElementById("heading");letsummary=document.getElementById("summary");letgallery=document.getElementById("gallery");letexpandedImageDiv=document.getElementById("expanded-image");letattributionLabel;// Show the display name and summary for the place.heading.textContent=place.displayName;summary.textContent=place.editorialSummary;// Add photos to the gallery.if(place.photos){place.photos?.forEach((photo)=>{constimg=document.createElement("img");constexpandedImage=document.createElement("img");img.src=photo.getURI({maxHeight:380});img.addEventListener("click",(event)=>{event.preventDefault();expandedImage.src=img.src;expandedImageDiv.innerHTML="";expandedImageDiv.appendChild(expandedImage);attributionLabel=createAttribution(photo.authorAttributions);expandedImageDiv.appendChild(attributionLabel);});gallery.appendChild(img);});}// Display the first photo.constimg=document.createElement("img");img.src=place.photos[0].getURI();expandedImageDiv.appendChild(img);attributionLabel=createAttribution(place.photos[0].authorAttributions);expandedImageDiv.appendChild(attributionLabel);// Helper function to create attribution DIV.functioncreateAttribution(attribution){attributionLabel=document.createElement("a");attributionLabel.classList.add("attribution-label");attributionLabel.textContent=attribution[0].displayName;attributionLabel.href=attribution[0].uri;attributionLabel.target="_blank;";returnattributionLabel;}}init();
Note: The JavaScript is compiled from the TypeScript snippet.

CSS

/* * Always set the map height explicitly to define the size of the div element * that contains the map. */#map{height:100%;}/* * Optional: Makes the sample page fill the window. */html,body{height:100%;margin:0;padding:0;}#container{display:flex;padding:10px;width:100%;height:100%;box-sizing:border-box;}.place-overview{width:400px;height:380px;overflow-x:auto;position:relative;margin-right:20px;}#info{font-family:sans-serif;position:sticky;position:-webkit-sticky;left:0;padding-bottom:10px;}#heading{width:500px;font-size:x-large;margin-bottom:20px;}#summary{width:500px;}#gallery{display:flex;}#galleryimg{width:200px;height:200px;margin-right:10px;margin-top:40px;border-radius:10px;cursor:pointer;}#expanded-image{display:flex;height:380px;overflow:hidden;background-color:#000;}#expanded-imageimg{width:100%;height:auto;object-fit:contain;}.attribution-label{background-color:#fff;opacity:0.7;font-size:10px;font-family:sans-serif;margin:2px;position:absolute;}

HTML

<html>  <head>    <title>Place Photos</title>    <link rel="stylesheet" type="text/css" href="./style.css" />    <script type="module" src="./index.js"></script>  </head>  <body>    <div>      <div>        <div>          <div></div>          <div></div>        </div>        <div></div>      </div>      <div></div>    </div>    <!-- prettier-ignore -->    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>  </body></html>

Try Sample

Get photos

To get photos for a place, include thephotos field in yourfetchFields() request parameters. The resulting Place instance contains an array of up to 10Photo objects, from which you may access images and their required attribution information. CallgetURI() to return the source photo URI, specifying the maximum height and/or width of the image. If you specify a value for bothmaxHeight and amaxWidth, the photo service will resize the image to the smaller of the two sizes, while maintaining the original aspect ratio.

The following example shows making a Place Details request for photos, callinggetURI() on a photo instance to return the source URI for the image, then adding the first photo result to animg element (attributions are omitted for clarity):

const{Place}=awaitgoogle.maps.importLibrary('places');// Use a place ID to create a new Place instance.constplace=newPlace({id:'ChIJydSuSkkUkFQRsqhB-cEtYnw',// Woodland Park Zoo, Seattle WA});// Call fetchFields, passing the desired data fields.awaitplace.fetchFields({fields:['photos']});// Add the first photo to an img element.constphotoImg=document.getElementById('image-container');photoImg.src=place.photos[0].getURI({maxHeight:400});

Author attributions

When you display a photo, you must also display the author attributions for the photo. Use theAuthorAttribution class to return attributions. An attribution includes the author's name (displayName), a URI for their Google Maps profile (uri), and a URI for the author's photo (photoURI). The following snippet shows returning thedisplayName,uri, andphotoURI for a place photo.

letname=place.photos[0].authorAttributions[0].displayName;leturl=place.photos[0].authorAttributions[0].uri;letauthorPhoto=place.photos[0].authorAttributions[0].photoURI;

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-10-10 UTC.