Stay organized with collections Save and categorize content based on your preferences.
This rudimentary photo carousel displays photos for the specified place, including the required author attributions (shown in the upper left corner of the photo).
Read the documentation.
TypeScriptasync 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();Note: Read the guide on using TypeScript and Google Maps. 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();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;
}
#gallery img {
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-image img {
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 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 Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone -b sample-place-photos https://github.com/googlemaps/js-samples.gitcd js-samplesnpm inpm start
Other samples can be tried by switching to any branch beginning with sample-SAMPLE_NAME.
git checkout sample-SAMPLE_NAMEnpm inpm start
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-08-14 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-14 UTC."],[[["This sample demonstrates fetching and displaying photos for a specified place using the Google Maps JavaScript API."],["It utilizes the `Place` class to retrieve place details, including photos and author attributions."],["Photos are displayed in a rudimentary carousel with a larger view when clicked."],["Author attributions are included in the upper left corner of the photos."],["The sample provides code in TypeScript, JavaScript, HTML, and CSS."]]],["The core functionality is fetching and displaying place data, including photos, using the Google Maps API. A `Place` instance is created with a specific place ID, and its `displayName`, `photos`, and `editorialSummary` fields are retrieved. The place's name and summary are shown, and photo thumbnails are added to a gallery. Clicking a thumbnail displays the full-size image and author attribution in an expanded view.\n"]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4