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
async function init () { const { Place } = await google . maps . importLibrary ( 'places' ) as google . maps . PlacesLibrary ; // Use a place ID to create a new Place instance. const place = new Place ({ id : 'ChIJydSuSkkUkFQRsqhB-cEtYnw' , // Woodland Park Zoo, Seattle WA }); // Call fetchFields, passing the desired data fields. await place . fetchFields ({ fields : [ 'displayName' , 'photos' , 'editorialSummary' ] }); // Get the various HTML elements. let heading = document . getElementById ( 'heading' ) as HTMLElement ; let summary = document . getElementById ( 'summary' ) as HTMLElement ; let gallery = document . getElementById ( 'gallery' ) as HTMLElement ; let expandedImageDiv = document . getElementById ( 'expanded-image' ) as HTMLElement ; let attributionLabel ; // Show the display name and summary for the place. heading . textContent = place . displayName as string ; summary . textContent = place . editorialSummary as string ; // Add photos to the gallery. if ( place . photos ) { place . photos ? . forEach (( photo ) = > { const img = document . createElement ( 'img' ); const expandedImage = 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. const img = 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. function createAttribution ( attribution ) { attributionLabel = document . createElement ( "a" ); attributionLabel . classList . add ( 'attribution-label' ); attributionLabel . textContent = attribution [ 0 ]. displayName ; attributionLabel . href = attribution [ 0 ]. uri ; attributionLabel . target = '_blank;' return attributionLabel ; } } init ();
JavaScript
async function init () { const { Place } = await google . maps . importLibrary ( "places" ); // Use a place ID to create a new Place instance. const place = new Place ({ id : "ChIJydSuSkkUkFQRsqhB-cEtYnw" , // Woodland Park Zoo, Seattle WA }); // Call fetchFields, passing the desired data fields. await place . fetchFields ({ fields : [ "displayName" , "photos" , "editorialSummary" ], }); // Get the various HTML elements. let heading = document . getElementById ( "heading" ); let summary = document . getElementById ( "summary" ); let gallery = document . getElementById ( "gallery" ); let expandedImageDiv = document . getElementById ( "expanded-image" ); let attributionLabel ; // 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 ) = > { const img = document . createElement ( "img" ); const expandedImage = 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. const img = 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. function createAttribution ( attribution ) { attributionLabel = document . createElement ( "a" ); attributionLabel . classList . add ( "attribution-label" ); attributionLabel . textContent = attribution [ 0 ]. displayName ; attributionLabel . href = attribution [ 0 ]. uri ; attributionLabel . target = "_blank;" ; return attributionLabel ; } } init ();
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 : 10 px ; width : 100 % ; height : 100 % ; box-sizing : border-box ; } . place-overview { width : 400 px ; height : 380 px ; overflow-x : auto ; position : relative ; margin-right : 20 px ; } # info { font-family : sans-serif ; position : sticky ; position : -webkit- sticky ; left : 0 ; padding-bottom : 10 px ; } # heading { width : 500 px ; font-size : x-large ; margin-bottom : 20 px ; } # summary { width : 500 px ; } # gallery { display : flex ; } # gallery img { width : 200 px ; height : 200 px ; margin-right : 10 px ; margin-top : 40 px ; border-radius : 10 px ; cursor : pointer ; } # expanded-image { display : flex ; height : 380 px ; overflow : hidden ; background-color : #000 ; } # expanded-image img { width : 100 % ; height : auto ; object-fit : contain ; } . attribution-label { background-color : #fff ; opacity : 0.7 ; font-size : 10 px ; font-family : sans-serif ; margin : 2 px ; 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 id="container"> <div class="place-overview"> <div id="info"> <div id="heading"></div> <div id="summary"></div> </div> <div id="gallery"></div> </div> <div id="expanded-image"></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 the photos
field in your fetchFields()
request parameters. The resulting Place instance contains an array of
up to 10 Photo
objects, from which you may access images and their required attribution information.
Call getURI()
to return the source photo URI, specifying the maximum height and/or
width of the image. If you specify a value for both maxHeight
and a maxWidth
,
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, calling getURI()
on a photo instance to return the source URI for the image, then adding the first photo result to
an img
element (attributions are omitted for clarity):
const { Place } = await google . maps . importLibrary ( 'places' ); // Use a place ID to create a new Place instance. const place = new Place ({ id : 'ChIJydSuSkkUkFQRsqhB-cEtYnw' , // Woodland Park Zoo, Seattle WA }); // Call fetchFields, passing the desired data fields. await place . fetchFields ({ fields : [ 'photos' ] }); // Add the first photo to an img element. const photoImg = 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 the AuthorAttribution
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 the displayName
, uri
, and photoURI
for a place photo.
let name = place . photos [ 0 ]. authorAttributions [ 0 ]. displayName ; let url = place . photos [ 0 ]. authorAttributions [ 0 ]. uri ; let authorPhoto = place . photos [ 0 ]. authorAttributions [ 0 ]. photoURI ;
