feat: Adds a demo for Place v2 reviews. (#1789)

* feat: Adds a demo for Place v2 reviews. * Update place-reviews.json Change to use weekly branch.
googlemaps · Jul 25, 2024 · b2c85ed · b2c85ed
1 parent b8a6931
commit b2c85ed
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 0 deletions.
diff --git a/samples/place-reviews/index.njk b/samples/place-reviews/index.njk
@@ -0,0 +1,9 @@
+<!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="map"></div>
+{% endblock %}
diff --git a/samples/place-reviews/index.ts b/samples/place-reviews/index.ts
@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_place_reviews]
+let map: google.maps.Map;
+let centerCoordinates = { lat: 42.349134, lng: -71.083184 }; // Boston, MA
+let infoWindow;
+let contentString;
+
+async function initMap() {
+    const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
+    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;
+    const { Place, Review } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;
+
+    map = new Map(document.getElementById('map') as HTMLElement, {
+        center: centerCoordinates,
+        zoom: 14,
+        // [START_EXCLUDE]
+        mapId: '4504f8b37365c3d0',
+        // [END_EXCLUDE]
+    });
+
+    // [START maps_place_reviews_get_first]
+    // Use a place ID to create a new Place instance.
+    const place = new Place({
+        id: 'ChIJB9a4Ifl744kRlpz0BQJzGQ8', // Crazy Good Kitchen, Boston, MA
+    });
+
+    // Call fetchFields, passing 'reviews' and other needed fields.
+    await place.fetchFields({
+        fields: ['displayName', 'formattedAddress', 'location', 'reviews'],
+    });
+
+    // If there are any reviews display the first one.
+    if (place.reviews) {
+        // Get info for the first review.
+        let reviewRating = place.reviews[0].rating;
+        let reviewText = place.reviews[0].text;
+        let authorName = place.reviews[0].authorAttribution!.displayName;
+        let authorUri = place.reviews[0].authorAttribution!.uri;
+
+        // Format the review using HTML.
+        contentString =
+            '<div id="title"><b>' + place.displayName + '</b></div>' +
+            '<div id="address">' + place.formattedAddress + '</div>' +
+            '<a href="' + authorUri + '" target="_blank">Author: ' + authorName + '</a>' +
+            '<div id="rating">Rating: ' + reviewRating + ' stars</div>' +
+            '<div id="rating"><p>Review: ' + reviewText + '</p></div>';
+    } else {
+        contentString = 'No reviews were found for ' + place.displayName + '.';
+    }
+
+    // Create an infowindow to display the review.
+    infoWindow = new InfoWindow({
+        content: contentString,
+        ariaLabel: place.displayName,
+    });
+    // [END maps_place_reviews_get_first]
+
+    // Add a marker.
+    const marker = new AdvancedMarkerElement({
+        map,
+        position: place.location,
+        title: place.displayName,
+    });
+
+    // Show the info window.
+    infoWindow.open({
+        anchor: marker,
+        map,
+    });
+}
+
+initMap();
+// [END maps_place_reviews] 
+export { };
diff --git a/samples/place-reviews/place-reviews.json b/samples/place-reviews/place-reviews.json
@@ -0,0 +1,13 @@
+{
+    "title": "Place Reviews",
+    "version": "weekly",
+    "dynamic_import": "true",
+    "tag": "place_reviews",
+    "name": "place-reviews",
+    "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-reviews/style.scss b/samples/place-reviews/style.scss
@@ -0,0 +1,13 @@
+/**
+ * @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_reviews] */
+ @include meta.load-css("../../shared/scss/default.scss");
+
+ /* [END maps_place_reviews] */
+