Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions samples/place-reviews/index.njk
Original file line number Diff line number Diff line change
@@ -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 %}
79 changes: 79 additions & 0 deletions samples/place-reviews/index.ts
Original file line number Diff line number Diff line change
@@ -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 { };
13 changes: 13 additions & 0 deletions samples/place-reviews/place-reviews.json
Original file line number Diff line number Diff line change
@@ -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 }}"
}
13 changes: 13 additions & 0 deletions samples/place-reviews/style.scss
Original file line number Diff line number Diff line change
@@ -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] */

Loading