diff --git a/samples/place-text-search/index.html b/samples/place-text-search/index.html
index 2e1417a3a..b641c55de 100644
--- a/samples/place-text-search/index.html
+++ b/samples/place-text-search/index.html
@@ -13,6 +13,10 @@
+
+
+
+
diff --git a/samples/place-text-search/index.ts b/samples/place-text-search/index.ts
index d4b676f19..5070a4389 100644
--- a/samples/place-text-search/index.ts
+++ b/samples/place-text-search/index.ts
@@ -6,58 +6,85 @@
// [START maps_place_text_search]
let map;
-let center;
+let markers = {};
+let infoWindow;
async function initMap() {
- const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+ const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
- center = { lat: 37.4161493, lng: -122.0812166 };
+ const center = { lat: 37.4161493, lng: -122.0812166 };
map = new Map(document.getElementById('map') as HTMLElement, {
center: center,
zoom: 11,
+ mapTypeControl: false,
mapId: 'DEMO_MAP_ID',
});
- findPlaces();
+ const textInput = document.getElementById('text-input') as HTMLInputElement;
+ const textInputButton = document.getElementById('text-input-button') as HTMLButtonElement;
+ const card = document.getElementById('text-input-card') as HTMLElement;
+ map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
+
+ textInputButton.addEventListener('click', () => {
+ findPlaces(textInput.value);
+ });
+
+ textInput.addEventListener('keydown', (event) => {
+ if (event.key === 'Enter') {
+ findPlaces(textInput.value);
+ }
+ });
+
+ infoWindow = new google.maps.InfoWindow();
}
-async function findPlaces() {
+async function findPlaces(query) {
const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
// [START maps_place_text_search_request]
const request = {
- textQuery: 'Tacos in Mountain View',
+ textQuery: query,
fields: ['displayName', 'location', 'businessStatus'],
- includedType: 'restaurant',
- locationBias: { lat: 37.4161493, lng: -122.0812166 },
+ includedType: '', // Restrict query to a specific type (leave blank for any).
+ useStrictTypeFiltering: true,
+ locationBias: map.center,
isOpenNow: true,
language: 'en-US',
maxResultCount: 8,
- minRating: 3.2,
+ minRating: 1, // Specify a minimum rating.
region: 'us',
- useStrictTypeFiltering: false,
};
- //@ts-ignore
const { places } = await Place.searchByText(request);
// [END maps_place_text_search_request]
if (places.length) {
- console.log(places);
-
const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
const bounds = new LatLngBounds();
+
+ // First remove all existing markers.
+ for (const id in markers) {
+ markers[id].map = null;
+ };
+ markers = {};
// Loop through and get all the results.
- places.forEach((place) => {
- const markerView = new AdvancedMarkerElement({
+ places.forEach(place => {
+ const marker = new AdvancedMarkerElement({
map,
position: place.location,
title: place.displayName,
});
+ markers[place.id] = marker;
+
+ marker.addListener('gmp-click', () => {
+ map.panTo(place.location);
+ updateInfoWindow(place.displayName, place.id, marker);
+ });
- bounds.extend(place.location as google.maps.LatLng);
- console.log(place);
+ if (place.location != null) {
+ bounds.extend(place.location);
+ }
});
map.fitBounds(bounds);
@@ -67,5 +94,16 @@ async function findPlaces() {
}
}
+// Helper function to create an info window.
+async function updateInfoWindow(title, content, anchor) {
+ infoWindow.setContent(content);
+ infoWindow.setHeaderContent(title);
+ infoWindow.open({
+ map,
+ anchor,
+ shouldFocus: false,
+ });
+}
+
initMap();
// [END maps_place_text_search]
diff --git a/samples/place-text-search/style.css b/samples/place-text-search/style.css
index 534917297..9dbc92efd 100644
--- a/samples/place-text-search/style.css
+++ b/samples/place-text-search/style.css
@@ -22,4 +22,39 @@ body {
padding: 0;
}
+#text-input-card {
+ width: 25%;
+ background-color: #fff;
+ border-radius: 5px;
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+ margin: 10px;
+ padding: 5px;
+ font-family: Roboto, sans-serif;
+ font-size: large;
+ font-weight: bold;
+}
+
+#text-input {
+ width: 100%;
+ padding: 10px;
+ margin: 0;
+ box-sizing: border-box;
+}
+
+#text-input-button {
+ display: inline-block;
+ margin-top: .5rem;
+ width: auto;
+ padding: .6rem .75rem;
+ font-size: .875rem;
+ font-weight: 500;
+ color: #fff;
+ background-color: #2563eb;
+ border: none;
+ border-radius: .375rem;
+ cursor: pointer;
+ transition: background-color .15s ease-in-out;
+ text-align: center
+}
+
/* [END maps_place_text_search] */
\ No newline at end of file