feat: Adds a demo for Place v2 Photos. (#1779)

googlemaps · Jul 12, 2024 · 354db80 · 354db80
1 parent 3aff9a8
commit 354db80
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 0 deletions.
diff --git a/samples/place-photos/index.njk b/samples/place-photos/index.njk
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<!--
+ @license
+ Copyright 2019 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+{% extends '../../src/_includes/layout.njk'%} {% block html %}
+<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>
+{% endblock %}
diff --git a/samples/place-photos/index.ts 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]
diff --git a/samples/place-photos/place-photos.json 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 }}"
+  }
+
diff --git a/samples/place-photos/style.scss 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] */