diff --git a/samples/place-reviews/README.md b/samples/place-reviews/README.md new file mode 100644 index 00000000..8b585a15 --- /dev/null +++ b/samples/place-reviews/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## place-reviews + +Demonstrates retrieving place reviews. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/place-reviews` +`npm start` + +### Build an individual example + +`cd samples/place-reviews` +`npm run build` + +From 'samples': + +`npm run build --workspace=place-reviews/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/place-reviews` +`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-reviews/index.html b/samples/place-reviews/index.html new file mode 100644 index 00000000..6a89aec0 --- /dev/null +++ b/samples/place-reviews/index.html @@ -0,0 +1,26 @@ + + + + + + Place Reviews + + + + + + + + + + + + diff --git a/samples/place-reviews/index.ts b/samples/place-reviews/index.ts new file mode 100644 index 00000000..ff05ca8c --- /dev/null +++ b/samples/place-reviews/index.ts @@ -0,0 +1,99 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_place_reviews] +let innerMap; +let infoWindow; +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; + +async function initMap() { + // Import the needed libraries. + const [{ InfoWindow }, { AdvancedMarkerElement }, { Place }] = + await Promise.all([ + google.maps.importLibrary( + 'maps' + ) as Promise, + google.maps.importLibrary( + 'marker' + ) as Promise, + google.maps.importLibrary( + 'places' + ) as Promise, + ]); + + innerMap = mapElement.innerMap; + + // [START maps_place_reviews_get_first] + // Create a new Place instance. + const place = new Place({ + id: 'ChIJpyiwa4Zw44kRBQSGWKv4wgA', // Faneuil Hall Marketplace, Boston, MA + }); + + // Call fetchFields, passing 'reviews' and other needed fields. + await place.fetchFields({ + fields: ['displayName', 'formattedAddress', 'location', 'reviews'], + }); + + // Create an HTML container. + const content = document.createElement('div'); + const title = document.createElement('div'); + const rating = document.createElement('div'); + const address = document.createElement('div'); + const review = document.createElement('div'); + const authorLink = document.createElement('a'); + + // If there are any reviews display the first one. + if (place.reviews && place.reviews.length > 0) { + // Get info for the first review. + const reviewRating = place.reviews[0].rating; + const reviewText = place.reviews[0].text; + const authorName = place.reviews[0].authorAttribution!.displayName; + const authorUri = place.reviews[0].authorAttribution!.uri; + + // Safely populate the HTML. + title.textContent = place.displayName || ''; + address.textContent = place.formattedAddress || ''; + rating.textContent = `Rating: ${reviewRating} stars`; + review.textContent = reviewText || ''; + authorLink.textContent = authorName; + authorLink.href = authorUri || ''; + authorLink.target = '_blank'; + + content.appendChild(title); + content.appendChild(address); + content.appendChild(rating); + content.appendChild(review); + content.appendChild(authorLink); + } else { + content.textContent = + `No reviews were found for ${place.displayName}.`; + } + + // Create an infowindow to display the review. + infoWindow = new InfoWindow({ + content, + ariaLabel: place.displayName, + }); + // [END maps_place_reviews_get_first] + + // Add a marker. + const marker = new AdvancedMarkerElement({ + map: innerMap, + position: place.location, + title: place.displayName, + }); + + innerMap.setCenter(place.location); + + // Show the info window. + infoWindow.open({ + anchor: marker, + map: innerMap, + }); +} + +initMap(); +// [END maps_place_reviews] diff --git a/samples/place-reviews/package.json b/samples/place-reviews/package.json new file mode 100644 index 00000000..c71e1931 --- /dev/null +++ b/samples/place-reviews/package.json @@ -0,0 +1,12 @@ +{ + "name": "@js-api-samples/place-reviews", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh place-reviews && bash ../app.sh place-reviews && bash ../docs.sh place-reviews && npm run build:vite --workspace=. && bash ../dist.sh place-reviews", + "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-reviews/style.css b/samples/place-reviews/style.css new file mode 100644 index 00000000..a9a35b8e --- /dev/null +++ b/samples/place-reviews/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_place_reviews] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +gmp-map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +/* [END maps_place_reviews] */ diff --git a/samples/place-reviews/tsconfig.json b/samples/place-reviews/tsconfig.json new file mode 100644 index 00000000..8e1d9de0 --- /dev/null +++ b/samples/place-reviews/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": ["es2015", "esnext", "es6", "dom", "dom.iterable"], + "moduleResolution": "Node", + "jsx": "preserve" + } +}