From 36985cedc7c0a904609f2dbe9bbe90bda8ee3070 Mon Sep 17 00:00:00 2001 From: googlemaps-bot Date: Fri, 12 Jul 2024 18:59:43 +0000 Subject: [PATCH] chore: update dist folder [skip ci] --- dist/index.html | 29 ++++++ dist/samples/place-photos/app/.env | 1 + dist/samples/place-photos/app/.eslintrc.json | 13 +++ dist/samples/place-photos/app/.gitignore | 4 + dist/samples/place-photos/app/README.md | 17 ++++ dist/samples/place-photos/app/env.d.ts | 12 +++ dist/samples/place-photos/app/index.html | 30 ++++++ dist/samples/place-photos/app/index.ts | 66 +++++++++++++ dist/samples/place-photos/app/package.json | 35 +++++++ dist/samples/place-photos/app/style.css | 91 ++++++++++++++++++ dist/samples/place-photos/app/tsconfig.json | 16 ++++ dist/samples/place-photos/app/vite.config.js | 11 +++ dist/samples/place-photos/docs/index.html | 32 +++++++ dist/samples/place-photos/docs/index.js | 70 ++++++++++++++ dist/samples/place-photos/docs/style.css | 93 +++++++++++++++++++ dist/samples/place-photos/iframe/index.html | 30 ++++++ dist/samples/place-photos/jsfiddle/demo.css | 91 ++++++++++++++++++ .../place-photos/jsfiddle/demo.details | 7 ++ dist/samples/place-photos/jsfiddle/demo.html | 29 ++++++ dist/samples/place-photos/jsfiddle/demo.js | 68 ++++++++++++++ .../place-photos/playground/index.html | 32 +++++++ dist/samples/place-photos/playground/index.ts | 66 +++++++++++++ .../place-photos/playground/package.json | 3 + .../playground/playground.ts.json | 17 ++++ .../samples/place-photos/playground/style.css | 86 +++++++++++++++++ 25 files changed, 949 insertions(+) create mode 100644 dist/samples/place-photos/app/.env create mode 100644 dist/samples/place-photos/app/.eslintrc.json create mode 100644 dist/samples/place-photos/app/.gitignore create mode 100644 dist/samples/place-photos/app/README.md create mode 100644 dist/samples/place-photos/app/env.d.ts create mode 100644 dist/samples/place-photos/app/index.html create mode 100644 dist/samples/place-photos/app/index.ts create mode 100644 dist/samples/place-photos/app/package.json create mode 100644 dist/samples/place-photos/app/style.css create mode 100644 dist/samples/place-photos/app/tsconfig.json create mode 100644 dist/samples/place-photos/app/vite.config.js create mode 100644 dist/samples/place-photos/docs/index.html create mode 100644 dist/samples/place-photos/docs/index.js create mode 100644 dist/samples/place-photos/docs/style.css create mode 100644 dist/samples/place-photos/iframe/index.html create mode 100644 dist/samples/place-photos/jsfiddle/demo.css create mode 100644 dist/samples/place-photos/jsfiddle/demo.details create mode 100644 dist/samples/place-photos/jsfiddle/demo.html create mode 100644 dist/samples/place-photos/jsfiddle/demo.js create mode 100644 dist/samples/place-photos/playground/index.html create mode 100644 dist/samples/place-photos/playground/index.ts create mode 100644 dist/samples/place-photos/playground/package.json create mode 100644 dist/samples/place-photos/playground/playground.ts.json create mode 100644 dist/samples/place-photos/playground/style.css diff --git a/dist/index.html b/dist/index.html index 408de0e74e..04e55fbb2f 100644 --- a/dist/index.html +++ b/dist/index.html @@ -4487,6 +4487,35 @@

place-nearby-search

+
+

place-photos

+
+ + + + Code +
+
+

place-search

diff --git a/dist/samples/place-photos/app/.env b/dist/samples/place-photos/app/.env new file mode 100644 index 0000000000..d7474dcb8b --- /dev/null +++ b/dist/samples/place-photos/app/.env @@ -0,0 +1 @@ +VITE_GOOGLE_MAPS_API_KEY=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg \ No newline at end of file diff --git a/dist/samples/place-photos/app/.eslintrc.json b/dist/samples/place-photos/app/.eslintrc.json new file mode 100644 index 0000000000..841a372aa2 --- /dev/null +++ b/dist/samples/place-photos/app/.eslintrc.json @@ -0,0 +1,13 @@ +{ + "extends": [ + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", + "rules": { + "@typescript-eslint/ban-ts-comment": 0, + "@typescript-eslint/no-this-alias": 1, + "@typescript-eslint/no-empty-function": 1, + "@typescript-eslint/explicit-module-boundary-types": 1, + "@typescript-eslint/no-unused-vars": 1 + } +} \ No newline at end of file diff --git a/dist/samples/place-photos/app/.gitignore b/dist/samples/place-photos/app/.gitignore new file mode 100644 index 0000000000..10ec766622 --- /dev/null +++ b/dist/samples/place-photos/app/.gitignore @@ -0,0 +1,4 @@ + +node_modules +dist +package-lock.json diff --git a/dist/samples/place-photos/app/README.md b/dist/samples/place-photos/app/README.md new file mode 100644 index 0000000000..012fc1859f --- /dev/null +++ b/dist/samples/place-photos/app/README.md @@ -0,0 +1,17 @@ +# Google Maps JavaScript Sample + +This sample is generated from @googlemaps/js-samples located at +https://github.com/googlemaps/js-samples. + +## Setup + +```sh +npm i +npm start # development +npm run build # production +``` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps/js-samples/issues). diff --git a/dist/samples/place-photos/app/env.d.ts b/dist/samples/place-photos/app/env.d.ts new file mode 100644 index 0000000000..2d29a7a6be --- /dev/null +++ b/dist/samples/place-photos/app/env.d.ts @@ -0,0 +1,12 @@ +/// + +/** + * @external https://vitejs.dev/guide/env-and-mode.html + */ +interface ImportMetaEnv { + readonly VITE_GOOGLE_MAPS_API_KEY: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/dist/samples/place-photos/app/index.html b/dist/samples/place-photos/app/index.html new file mode 100644 index 0000000000..9783b3ecbc --- /dev/null +++ b/dist/samples/place-photos/app/index.html @@ -0,0 +1,30 @@ + + + + + Place Photos + + + + + +
+
+
+
+
+
+ +
+
+
+ + + + + diff --git a/dist/samples/place-photos/app/index.ts b/dist/samples/place-photos/app/index.ts new file mode 100644 index 0000000000..d8f30ffa05 --- /dev/null +++ b/dist/samples/place-photos/app/index.ts @@ -0,0 +1,66 @@ +/** + * @license + * Copyright 2024 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +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(); diff --git a/dist/samples/place-photos/app/package.json b/dist/samples/place-photos/app/package.json new file mode 100644 index 0000000000..f53e4937e0 --- /dev/null +++ b/dist/samples/place-photos/app/package.json @@ -0,0 +1,35 @@ +{ + "name": "place-photos", + "description": "Samples for Google Maps JavaScript", + "version": "2.1.4", + "keywords": [ + "google", + "javascript", + "maps", + "samples" + ], + "homepage": "https://github.com/googlemaps/js-samples#readme", + "bugs": { + "url": "https://github.com/googlemaps/js-samples/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/googlemaps/js-samples.git" + }, + "files": [], + "license": "Apache-2.0", + "scripts": { + "dev": "vite", + "start": "vite", + "build": "vite build --outDir dist --base './'", + "test": "tsc --no-emit", + "preview": "vite preview" + }, + "devDependencies": { + "@types/google.maps": "^3.53.5", + "typescript": "^5.5.3", + "vite": "^5.2.13" + }, + "private": true, + "dependencies": {} +} \ No newline at end of file diff --git a/dist/samples/place-photos/app/style.css b/dist/samples/place-photos/app/style.css new file mode 100644 index 0000000000..0c24fe14b1 --- /dev/null +++ b/dist/samples/place-photos/app/style.css @@ -0,0 +1,91 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* + * 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%; +} + +.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; +} + diff --git a/dist/samples/place-photos/app/tsconfig.json b/dist/samples/place-photos/app/tsconfig.json new file mode 100644 index 0000000000..b405998dad --- /dev/null +++ b/dist/samples/place-photos/app/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} \ No newline at end of file diff --git a/dist/samples/place-photos/app/vite.config.js b/dist/samples/place-photos/app/vite.config.js new file mode 100644 index 0000000000..d49e45cd7e --- /dev/null +++ b/dist/samples/place-photos/app/vite.config.js @@ -0,0 +1,11 @@ +import { defineConfig } from "vite"; + +// https://vitejs.dev/config/ +export default defineConfig({ + server: { + hmr: + process.env.CODESANDBOX_SSE || process.env.GITPOD_WORKSPACE_ID + ? 443 + : undefined, + }, +}); diff --git a/dist/samples/place-photos/docs/index.html b/dist/samples/place-photos/docs/index.html new file mode 100644 index 0000000000..2fae3ea107 --- /dev/null +++ b/dist/samples/place-photos/docs/index.html @@ -0,0 +1,32 @@ + + + + + + Place Photos + + + + + +
+
+
+
+
+
+ +
+
+
+ + + + + + diff --git a/dist/samples/place-photos/docs/index.js b/dist/samples/place-photos/docs/index.js new file mode 100644 index 0000000000..571ac43fb5 --- /dev/null +++ b/dist/samples/place-photos/docs/index.js @@ -0,0 +1,70 @@ +"use strict"; + +/** + * @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"); + // 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(); +// [END maps_place_photos] diff --git a/dist/samples/place-photos/docs/style.css b/dist/samples/place-photos/docs/style.css new file mode 100644 index 0000000000..b8bfe1f9df --- /dev/null +++ b/dist/samples/place-photos/docs/style.css @@ -0,0 +1,93 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_place_photos] */ +/* + * 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%; +} + +.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 diff --git a/dist/samples/place-photos/iframe/index.html b/dist/samples/place-photos/iframe/index.html new file mode 100644 index 0000000000..bb0dca84ec --- /dev/null +++ b/dist/samples/place-photos/iframe/index.html @@ -0,0 +1,30 @@ + + + + + Place Photos + + + + + +
+
+
+
+
+
+ +
+
+
+ + + + + diff --git a/dist/samples/place-photos/jsfiddle/demo.css b/dist/samples/place-photos/jsfiddle/demo.css new file mode 100644 index 0000000000..0c24fe14b1 --- /dev/null +++ b/dist/samples/place-photos/jsfiddle/demo.css @@ -0,0 +1,91 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* + * 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%; +} + +.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; +} + diff --git a/dist/samples/place-photos/jsfiddle/demo.details b/dist/samples/place-photos/jsfiddle/demo.details new file mode 100644 index 0000000000..4dd37859f3 --- /dev/null +++ b/dist/samples/place-photos/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: Place Photos +authors: + - Justin Poehnelt +tags: + - google maps +load_type: h +description: Sample code for Google Maps Platform JavaScript API diff --git a/dist/samples/place-photos/jsfiddle/demo.html b/dist/samples/place-photos/jsfiddle/demo.html new file mode 100644 index 0000000000..48542ec15f --- /dev/null +++ b/dist/samples/place-photos/jsfiddle/demo.html @@ -0,0 +1,29 @@ + + + + + Place Photos + + + + +
+
+
+
+
+
+ +
+
+
+ + + + + diff --git a/dist/samples/place-photos/jsfiddle/demo.js b/dist/samples/place-photos/jsfiddle/demo.js new file mode 100644 index 0000000000..ecd554466a --- /dev/null +++ b/dist/samples/place-photos/jsfiddle/demo.js @@ -0,0 +1,68 @@ +"use strict"; + +/** + * @license + * Copyright 2024 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +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(); diff --git a/dist/samples/place-photos/playground/index.html b/dist/samples/place-photos/playground/index.html new file mode 100644 index 0000000000..7d80d5f97a --- /dev/null +++ b/dist/samples/place-photos/playground/index.html @@ -0,0 +1,32 @@ + + + Place Photos + + + + + + + + + +
+
+
+
+
+
+ +
+
+
+ + + + + diff --git a/dist/samples/place-photos/playground/index.ts b/dist/samples/place-photos/playground/index.ts new file mode 100644 index 0000000000..f6cd7ad516 --- /dev/null +++ b/dist/samples/place-photos/playground/index.ts @@ -0,0 +1,66 @@ +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(); diff --git a/dist/samples/place-photos/playground/package.json b/dist/samples/place-photos/playground/package.json new file mode 100644 index 0000000000..33703d5822 --- /dev/null +++ b/dist/samples/place-photos/playground/package.json @@ -0,0 +1,3 @@ +{ + "dependencies": {} +} \ No newline at end of file diff --git a/dist/samples/place-photos/playground/playground.ts.json b/dist/samples/place-photos/playground/playground.ts.json new file mode 100644 index 0000000000..dfc32121fc --- /dev/null +++ b/dist/samples/place-photos/playground/playground.ts.json @@ -0,0 +1,17 @@ +{ + "files": { + "index.ts": { + "label": "TypeScript" + }, + "style.css": { + "label": "CSS" + }, + "index.html": { + "label": "HTML" + }, + "../../../types/google-maps/index.d.ts": { + "label": "@types/google.maps", + "hidden": true + } + } +} \ No newline at end of file diff --git a/dist/samples/place-photos/playground/style.css b/dist/samples/place-photos/playground/style.css new file mode 100644 index 0000000000..91005b4a5a --- /dev/null +++ b/dist/samples/place-photos/playground/style.css @@ -0,0 +1,86 @@ +/* + * 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%; +} + +.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; +} +