From 8dc6e7cc41c047b97b988a12a66226c761c76230 Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 27 Jan 2026 12:54:51 -0800 Subject: [PATCH 1/6] feat: Migrates the Place Photos sample. --- samples/place-photos/README.md | 41 +++++++++++++ samples/place-photos/index.html | 31 ++++++++++ samples/place-photos/index.ts | 85 +++++++++++++++++++++++++ samples/place-photos/package.json | 14 +++++ samples/place-photos/style.css | 99 ++++++++++++++++++++++++++++++ samples/place-photos/tsconfig.json | 17 +++++ 6 files changed, 287 insertions(+) create mode 100644 samples/place-photos/README.md create mode 100644 samples/place-photos/index.html create mode 100644 samples/place-photos/index.ts create mode 100644 samples/place-photos/package.json create mode 100644 samples/place-photos/style.css create mode 100644 samples/place-photos/tsconfig.json diff --git a/samples/place-photos/README.md b/samples/place-photos/README.md new file mode 100644 index 000000000..0c34bbaef --- /dev/null +++ b/samples/place-photos/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## place-photos + +This sample demonstrates the use of the Places API to display photos of a place. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/place-photos` +`npm start` + +### Build an individual example + +`cd samples/place-photos` +`npm run build` + +From 'samples': + +`npm run build --workspace=place-photos/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/place-photos` +`npx eslint index.ts` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). diff --git a/samples/place-photos/index.html b/samples/place-photos/index.html new file mode 100644 index 000000000..80cce7172 --- /dev/null +++ b/samples/place-photos/index.html @@ -0,0 +1,31 @@ + + + + + + Place Photos + + + + + + + +
+
+
+

+
+
+ +
+
+
+ + + diff --git a/samples/place-photos/index.ts b/samples/place-photos/index.ts new file mode 100644 index 000000000..0e4a34d7c --- /dev/null +++ b/samples/place-photos/index.ts @@ -0,0 +1,85 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_place_photos] +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 altText = 'Photo of ' + place.displayName; + const img = document.createElement('img'); + const imgButton = document.createElement('button'); + const expandedImage = document.createElement('img'); + img.src = photo?.getURI({ maxHeight: 380 }); + img.alt = altText; + imgButton.addEventListener('click', (event) => { + event.preventDefault(); + expandedImage.src = img.src; + expandedImage.alt = altText; + expandedImageDiv.innerHTML = ''; + expandedImageDiv.appendChild(expandedImage); + attributionLabel = createAttribution(photo.authorAttributions); + expandedImageDiv.appendChild(attributionLabel); + }); + + imgButton.appendChild(img); + gallery.appendChild(imgButton); + }); + } + + // Display the first photo. + if (place.photos && place.photos.length > 0) { + const img = document.createElement('img'); + img.alt = 'Photo of ' + place.displayName; + 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) { + const attributionLabel = document.createElement('a'); + attributionLabel.classList.add('attribution-label'); + if (attribution && attribution[0]) { + attributionLabel.textContent = attribution[0].displayName; + attributionLabel.href = attribution[0].uri; + attributionLabel.target = '_blank'; + attributionLabel.rel = 'noopener noreferrer'; + return attributionLabel; + } + } +} + +init(); +// [END maps_place_photos] diff --git a/samples/place-photos/package.json b/samples/place-photos/package.json new file mode 100644 index 000000000..41d201e6c --- /dev/null +++ b/samples/place-photos/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/place-photos", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh place-photos && bash ../app.sh place-photos && bash ../docs.sh place-photos && npm run build:vite --workspace=. && bash ../dist.sh place-photos", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/samples/place-photos/style.css b/samples/place-photos/style.css new file mode 100644 index 000000000..8ee283607 --- /dev/null +++ b/samples/place-photos/style.css @@ -0,0 +1,99 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_place_photos] */ +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +#container { + display: flex; + border: 2px solid black; + border-radius: 10px; + padding: 10px; + max-width: 950px; + height: 100%; + max-height: 400px; + 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: 100%; +} + +#gallery { + display: flex; + padding-top: 10px; +} + +#gallery img { + width: 200px; + height: 200px; + margin: 10px; + border-radius: 10px; + cursor: pointer; + object-fit: cover; /* fill the area without distorting the image */ +} + +#expanded-image { + display: flex; + height: 370px; + overflow: hidden; + background-color: #000; + border-radius: 10px; + margin: 0 auto; +} + +.attribution-label { + background-color: rgba(255, 255, 255, 0.7); + font-size: 10px; + font-family: sans-serif; + margin: 2px; + position: absolute; +} + +button { + display: flex; + outline: none; + border: none; + padding: 0; + background: none; + cursor: pointer; +} + +button:focus { + background-color: rgb(222, 222, 222); + border-radius: 10px; +} + +/* [END maps_place_photos] */ diff --git a/samples/place-photos/tsconfig.json b/samples/place-photos/tsconfig.json new file mode 100644 index 000000000..366aabb04 --- /dev/null +++ b/samples/place-photos/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} From 766d5967efab803963d96d183e4084f7730f72da Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 27 Jan 2026 12:54:51 -0800 Subject: [PATCH 2/6] feat: Migrates the Place Photos sample. --- samples/place-photos/README.md | 41 +++++++++++++ samples/place-photos/index.html | 31 ++++++++++ samples/place-photos/index.ts | 95 ++++++++++++++++++++++++++++ samples/place-photos/package.json | 14 +++++ samples/place-photos/style.css | 99 ++++++++++++++++++++++++++++++ samples/place-photos/tsconfig.json | 17 +++++ 6 files changed, 297 insertions(+) create mode 100644 samples/place-photos/README.md create mode 100644 samples/place-photos/index.html create mode 100644 samples/place-photos/index.ts create mode 100644 samples/place-photos/package.json create mode 100644 samples/place-photos/style.css create mode 100644 samples/place-photos/tsconfig.json diff --git a/samples/place-photos/README.md b/samples/place-photos/README.md new file mode 100644 index 000000000..0c34bbaef --- /dev/null +++ b/samples/place-photos/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## place-photos + +This sample demonstrates the use of the Places API to display photos of a place. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/place-photos` +`npm start` + +### Build an individual example + +`cd samples/place-photos` +`npm run build` + +From 'samples': + +`npm run build --workspace=place-photos/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/place-photos` +`npx eslint index.ts` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). diff --git a/samples/place-photos/index.html b/samples/place-photos/index.html new file mode 100644 index 000000000..80cce7172 --- /dev/null +++ b/samples/place-photos/index.html @@ -0,0 +1,31 @@ + + + + + + Place Photos + + + + + + + +
+
+
+

+
+
+ +
+
+
+ + + diff --git a/samples/place-photos/index.ts b/samples/place-photos/index.ts new file mode 100644 index 000000000..bfeb8727c --- /dev/null +++ b/samples/place-photos/index.ts @@ -0,0 +1,95 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_place_photos] +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 altText = 'Photo of ' + place.displayName; + const img = document.createElement('img'); + const imgButton = document.createElement('button'); + const expandedImage = document.createElement('img'); + img.src = photo?.getURI({ maxHeight: 380 }); + img.alt = altText; + imgButton.addEventListener('click', (event) => { + centerSelectedThumbnail(imgButton); + event.preventDefault(); + expandedImage.src = img.src; + expandedImage.alt = altText; + expandedImageDiv.innerHTML = ''; + expandedImageDiv.appendChild(expandedImage); + attributionLabel = createAttribution(photo.authorAttributions); + expandedImageDiv.appendChild(attributionLabel); + }); + + imgButton.addEventListener('focus', ()=> { + centerSelectedThumbnail(imgButton); + }); + + imgButton.appendChild(img); + gallery.appendChild(imgButton); + }); + } + + // Display the first photo. + if (place.photos && place.photos.length > 0) { + const img = document.createElement('img'); + img.alt = 'Photo of ' + place.displayName; + 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) { + const attributionLabel = document.createElement('a'); + attributionLabel.classList.add('attribution-label'); + if (attribution && attribution[0]) { + attributionLabel.textContent = attribution[0].displayName; + attributionLabel.href = attribution[0].uri; + attributionLabel.target = '_blank'; + attributionLabel.rel = 'noopener noreferrer'; + return attributionLabel; + } + } + + // Helper function to center the selected thumbnail in the gallery. + function centerSelectedThumbnail(element: HTMLElement) { + element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }); + } +} + +init(); +// [END maps_place_photos] diff --git a/samples/place-photos/package.json b/samples/place-photos/package.json new file mode 100644 index 000000000..41d201e6c --- /dev/null +++ b/samples/place-photos/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/place-photos", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh place-photos && bash ../app.sh place-photos && bash ../docs.sh place-photos && npm run build:vite --workspace=. && bash ../dist.sh place-photos", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/samples/place-photos/style.css b/samples/place-photos/style.css new file mode 100644 index 000000000..2703d4262 --- /dev/null +++ b/samples/place-photos/style.css @@ -0,0 +1,99 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_place_photos] */ +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +#container { + display: flex; + border: 2px solid black; + border-radius: 10px; + padding: 10px; + max-width: 950px; + height: 100%; + max-height: 400px; + 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: 100%; +} + +#gallery { + display: flex; + padding-top: 10px; +} + +#gallery img { + width: 200px; + height: 200px; + margin: 10px; + border-radius: 10px; + cursor: pointer; + object-fit: cover; /* fill the area without distorting the image */ +} + +#expanded-image { + display: flex; + height: 370px; + overflow: hidden; + background-color: #000; + border-radius: 10px; + margin: 0 auto; +} + +.attribution-label { + background-color: rgba(255, 255, 255, 0.7); + font-size: 10px; + font-family: sans-serif; + margin: 2px; + position: absolute; +} + +button { + display: flex; + outline: none; + border: none; + padding: 0; + background: none; + cursor: pointer; +} + +button:focus { + border: 2px solid blue; + border-radius: 10px; +} + +/* [END maps_place_photos] */ diff --git a/samples/place-photos/tsconfig.json b/samples/place-photos/tsconfig.json new file mode 100644 index 000000000..366aabb04 --- /dev/null +++ b/samples/place-photos/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} From 73c18b236ee0395c8282efe96cea841abda77d7d Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 29 Jan 2026 13:41:59 -0800 Subject: [PATCH 3/6] Update package.json --- samples/place-photos/package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/samples/place-photos/package.json b/samples/place-photos/package.json index 41d201e6c..6b47f1c64 100644 --- a/samples/place-photos/package.json +++ b/samples/place-photos/package.json @@ -7,8 +7,5 @@ "start": "tsc && vite build --base './' && vite", "build:vite": "vite build --base './'", "preview": "vite preview" - }, - "dependencies": { - } } From a32f1aadd585b30ff201f5007979bbcbb381a9b7 Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 10 Feb 2026 07:35:40 -0800 Subject: [PATCH 4/6] Address review comments --- samples/place-photos/index.ts | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/samples/place-photos/index.ts b/samples/place-photos/index.ts index bfeb8727c..e8bdd5e91 100644 --- a/samples/place-photos/index.ts +++ b/samples/place-photos/index.ts @@ -21,13 +21,12 @@ async function init() { }); // 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( + const heading = document.getElementById('heading') as HTMLElement; + const summary = document.getElementById('summary') as HTMLElement; + const gallery = document.getElementById('gallery') as HTMLElement; + const expandedImageDiv = document.getElementById( 'expanded-image' ) as HTMLElement; - let attributionLabel; // Show the display name and summary for the place. heading.textContent = place.displayName as string; @@ -49,7 +48,7 @@ async function init() { expandedImage.alt = altText; expandedImageDiv.innerHTML = ''; expandedImageDiv.appendChild(expandedImage); - attributionLabel = createAttribution(photo.authorAttributions); + const attributionLabel = createAttribution(photo.authorAttributions)!; expandedImageDiv.appendChild(attributionLabel); }); @@ -68,17 +67,17 @@ async function init() { img.alt = 'Photo of ' + place.displayName; img.src = place.photos![0].getURI(); expandedImageDiv.appendChild(img); - attributionLabel = createAttribution(place.photos![0].authorAttributions); + const attributionLabel = createAttribution(place.photos![0].authorAttributions)!; expandedImageDiv.appendChild(attributionLabel); } // Helper function to create attribution DIV. - function createAttribution(attribution) { + function createAttribution(attributions: google.maps.places.AuthorAttribution[]) { const attributionLabel = document.createElement('a'); attributionLabel.classList.add('attribution-label'); - if (attribution && attribution[0]) { - attributionLabel.textContent = attribution[0].displayName; - attributionLabel.href = attribution[0].uri; + if (attributions && attributions[0]) { + attributionLabel.textContent = attributions[0].displayName; + attributionLabel.href = attributions[0].uri!; attributionLabel.target = '_blank'; attributionLabel.rel = 'noopener noreferrer'; return attributionLabel; From a9f97327c26cafa338d153c61a9b817d6b94ce8a Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 10 Feb 2026 11:02:35 -0800 Subject: [PATCH 5/6] Addresses second round of comments --- samples/place-photos/index.ts | 69 +++++++++++++++++------------------ 1 file changed, 34 insertions(+), 35 deletions(-) diff --git a/samples/place-photos/index.ts b/samples/place-photos/index.ts index e8bdd5e91..9c518a268 100644 --- a/samples/place-photos/index.ts +++ b/samples/place-photos/index.ts @@ -33,55 +33,54 @@ async function init() { summary.textContent = place.editorialSummary as string; // Add photos to the gallery. - if (place.photos) { - place.photos?.forEach((photo) => { - const altText = 'Photo of ' + place.displayName; - const img = document.createElement('img'); - const imgButton = document.createElement('button'); - const expandedImage = document.createElement('img'); - img.src = photo?.getURI({ maxHeight: 380 }); - img.alt = altText; - imgButton.addEventListener('click', (event) => { - centerSelectedThumbnail(imgButton); - event.preventDefault(); - expandedImage.src = img.src; - expandedImage.alt = altText; - expandedImageDiv.innerHTML = ''; - expandedImageDiv.appendChild(expandedImage); - const attributionLabel = createAttribution(photo.authorAttributions)!; - expandedImageDiv.appendChild(attributionLabel); - }); - - imgButton.addEventListener('focus', ()=> { - centerSelectedThumbnail(imgButton); - }); + place.photos?.forEach((photo) => { + const altText = 'Photo of ' + place.displayName; + const img = document.createElement('img'); + const imgButton = document.createElement('button'); + const expandedImage = document.createElement('img'); + img.src = photo?.getURI({ maxHeight: 380 }); + img.alt = altText; + imgButton.addEventListener('click', (event) => { + centerSelectedThumbnail(imgButton); + event.preventDefault(); + expandedImage.src = img.src; + expandedImage.alt = altText; + expandedImageDiv.innerHTML = ''; + expandedImageDiv.appendChild(expandedImage); + const attributionLabel = createAttribution(photo.authorAttributions)!; + expandedImageDiv.appendChild(attributionLabel); + }); - imgButton.appendChild(img); - gallery.appendChild(imgButton); + imgButton.addEventListener('focus', ()=> { + centerSelectedThumbnail(imgButton); }); - } + + imgButton.appendChild(img); + gallery.appendChild(imgButton); + }); // Display the first photo. if (place.photos && place.photos.length > 0) { + const photo = place.photos[0]; const img = document.createElement('img'); img.alt = 'Photo of ' + place.displayName; - img.src = place.photos![0].getURI(); + img.src = photo.getURI(); expandedImageDiv.appendChild(img); - const attributionLabel = createAttribution(place.photos![0].authorAttributions)!; - expandedImageDiv.appendChild(attributionLabel); + + if (photo.authorAttributions && photo.authorAttributions.length > 0) { + expandedImageDiv.appendChild(createAttribution(photo.authorAttributions)!); + } } // Helper function to create attribution DIV. function createAttribution(attributions: google.maps.places.AuthorAttribution[]) { const attributionLabel = document.createElement('a'); attributionLabel.classList.add('attribution-label'); - if (attributions && attributions[0]) { - attributionLabel.textContent = attributions[0].displayName; - attributionLabel.href = attributions[0].uri!; - attributionLabel.target = '_blank'; - attributionLabel.rel = 'noopener noreferrer'; - return attributionLabel; - } + attributionLabel.textContent = attributions[0].displayName; + attributionLabel.href = attributions[0].uri!; + attributionLabel.target = '_blank'; + attributionLabel.rel = 'noopener noreferrer'; + return attributionLabel; } // Helper function to center the selected thumbnail in the gallery. From 64ab16cc609f88a72d23a505930962a217001ced Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 10 Feb 2026 12:28:33 -0800 Subject: [PATCH 6/6] Address third round of review comments --- samples/place-photos/index.ts | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/samples/place-photos/index.ts b/samples/place-photos/index.ts index 9c518a268..050b97266 100644 --- a/samples/place-photos/index.ts +++ b/samples/place-photos/index.ts @@ -47,11 +47,13 @@ async function init() { expandedImage.alt = altText; expandedImageDiv.innerHTML = ''; expandedImageDiv.appendChild(expandedImage); - const attributionLabel = createAttribution(photo.authorAttributions)!; + const attributionLabel = createAttribution( + photo.authorAttributions[0] + )!; expandedImageDiv.appendChild(attributionLabel); }); - imgButton.addEventListener('focus', ()=> { + imgButton.addEventListener('focus', () => { centerSelectedThumbnail(imgButton); }); @@ -66,18 +68,22 @@ async function init() { img.alt = 'Photo of ' + place.displayName; img.src = photo.getURI(); expandedImageDiv.appendChild(img); - + if (photo.authorAttributions && photo.authorAttributions.length > 0) { - expandedImageDiv.appendChild(createAttribution(photo.authorAttributions)!); + expandedImageDiv.appendChild( + createAttribution(photo.authorAttributions[0]) + ); } } // Helper function to create attribution DIV. - function createAttribution(attributions: google.maps.places.AuthorAttribution[]) { + function createAttribution( + attribution: google.maps.places.AuthorAttribution + ) { const attributionLabel = document.createElement('a'); attributionLabel.classList.add('attribution-label'); - attributionLabel.textContent = attributions[0].displayName; - attributionLabel.href = attributions[0].uri!; + attributionLabel.textContent = attribution.displayName; + attributionLabel.href = attribution.uri!; attributionLabel.target = '_blank'; attributionLabel.rel = 'noopener noreferrer'; return attributionLabel; @@ -85,7 +91,11 @@ async function init() { // Helper function to center the selected thumbnail in the gallery. function centerSelectedThumbnail(element: HTMLElement) { - element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }); + element.scrollIntoView({ + behavior: 'smooth', + block: 'center', + inline: 'center', + }); } }