diff --git a/samples/place-photos/index.njk b/samples/place-photos/index.njk new file mode 100644 index 0000000000..9473a3c7a9 --- /dev/null +++ b/samples/place-photos/index.njk @@ -0,0 +1,18 @@ + + +{% extends '../../src/_includes/layout.njk'%} {% block html %} +
+
+
+
+
+
+ +
+
+
+{% endblock %} \ No newline at end of file diff --git a/samples/place-photos/index.ts b/samples/place-photos/index.ts new file mode 100644 index 0000000000..2a7687cc5c --- /dev/null +++ b/samples/place-photos/index.ts @@ -0,0 +1,68 @@ +/** + * @license + * Copyright 2024 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 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(); +// [END maps_place_photos] \ No newline at end of file diff --git a/samples/place-photos/place-photos.json b/samples/place-photos/place-photos.json new file mode 100644 index 0000000000..a51304fc5c --- /dev/null +++ b/samples/place-photos/place-photos.json @@ -0,0 +1,14 @@ +{ + "title": "Place Photos", + "version": "weekly", + "dynamic_import": "true", + "tag": "place_photos", + "name": "place-photos", + "pagination": { + "data": "mode", + "size": 1, + "alias": "mode" + }, + "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}" + } + \ No newline at end of file diff --git a/samples/place-photos/style.scss b/samples/place-photos/style.scss new file mode 100644 index 0000000000..5d52f4a92a --- /dev/null +++ b/samples/place-photos/style.scss @@ -0,0 +1,80 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order + +/* [START maps_place_photos] */ +@include meta.load-css("../../shared/scss/default.scss"); + +#container { + display: flex; + padding: 10px; + width: 100%; + height: 100% +} + +.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; +} + +/* [END maps_place_photos] */ \ No newline at end of file