サンプル ソースコードの全文を見る
このサンプルでは、場所の詳細情報(その場所についての最初のクチコミなど)を取得し、情報ウィンドウに表示します。
TypeScript
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, // ... }); // Use a place ID to 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'], }); // If there are any reviews display the first one. if (place.reviews && place.reviews.length > 0) { // 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, }); // Add a marker. const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); // Show the info window. infoWindow.open({ anchor: marker, map, }); } initMap();
JavaScript
let 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"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); const { Place, Review } = await google.maps.importLibrary("places"); map = new Map(document.getElementById("map"), { center: centerCoordinates, zoom: 14, // ... }); // Use a place ID to 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"], }); // If there are any reviews display the first one. if (place.reviews && place.reviews.length > 0) { // 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, }); // Add a marker. const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); // Show the info window. infoWindow.open({ anchor: marker, map, }); } initMap();
CSS
/* * 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; }
HTML
<html> <head> <title>Place Reviews</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
サンプルを試す
場所のクチコミを取得する
ある場所のクチコミのデータを取得するには、fetchFields()
リクエスト パラメータに reviews
フィールドを含めます。作成される Place インスタンスに Review
オブジェクトの配列が格納されるため、そこから必要なクチコミ情報にアクセスできます。
以下のサンプルは、Place Details リクエストでクチコミの情報を取得する方法を示しています。
// Use a place ID to 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"], }); // If there are any reviews display the first one. if (place.reviews && place.reviews.length > 0) { // 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, });
Review
インスタンスには、以下が格納されます。
AuthorAttribution
- ユーザーが指定した
rating
publishTime
(日付)とrelativePublishTimeDescription
(現在から見たクチコミの投稿時期、「1 か月前」など)- クチコミの
text
- クチコミの言語を表す
textLanguageCode
この場所の総合評価を確認するには、Place.rating
プロパティを使用します(fetchFields()
リクエスト パラメータの rating
フィールドをリクエストしてください)。
著作者の帰属情報
クチコミを表示する場合、そのクチコミの著作者(投稿者)の帰属情報も表示する必要があります。帰属情報を返すには AuthorAttribution
クラスを使用します。帰属情報には、著作者の名前(displayName
)、Google マップ プロフィールの URI(uri
)、著作者の写真の URI(photoURI
)が含まれます。次のスニペットは、帰属情報の displayName
、uri
、photoURI
を返す方法を示しています。
let authorName = place.reviews[0].authorAttribution!.displayName; let authorUri = place.reviews[0].authorAttribution!.uri; let authorPhoto = place.reviews[0].authorAttribution!.photoURI;