diff --git a/dist/samples/place-text-search/app/index.html b/dist/samples/place-text-search/app/index.html
index 2e1417a3..b641c55d 100644
--- a/dist/samples/place-text-search/app/index.html
+++ b/dist/samples/place-text-search/app/index.html
@@ -13,6 +13,10 @@
+
+
+
+
diff --git a/dist/samples/place-text-search/app/index.ts b/dist/samples/place-text-search/app/index.ts
index d4b676f1..5070a438 100644
--- a/dist/samples/place-text-search/app/index.ts
+++ b/dist/samples/place-text-search/app/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/dist/samples/place-text-search/app/style.css b/dist/samples/place-text-search/app/style.css
index 53491729..9dbc92ef 100644
--- a/dist/samples/place-text-search/app/style.css
+++ b/dist/samples/place-text-search/app/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
diff --git a/dist/samples/place-text-search/dist/assets/index-B0L17ZdS.css b/dist/samples/place-text-search/dist/assets/index-B0L17ZdS.css
new file mode 100644
index 00000000..33244fe4
--- /dev/null
+++ b/dist/samples/place-text-search/dist/assets/index-B0L17ZdS.css
@@ -0,0 +1,5 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */#map{height:100%}html,body{height:100%;margin:0;padding:0}#text-input-card{width:25%;background-color:#fff;border-radius:5px;box-shadow:#00000059 0 5px 15px;margin:10px;padding:5px;font-family:Roboto,sans-serif;font-size:large;font-weight:700}#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}
diff --git a/dist/samples/place-text-search/dist/assets/index-CgrE9OxR.js b/dist/samples/place-text-search/dist/assets/index-CgrE9OxR.js
deleted file mode 100644
index 4408f3a2..00000000
--- a/dist/samples/place-text-search/dist/assets/index-CgrE9OxR.js
+++ /dev/null
@@ -1,5 +0,0 @@
-(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const o of t.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function s(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function n(e){if(e.ep)return;e.ep=!0;const t=s(e);fetch(e.href,t)}})();/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */let a,c;async function l(){const{Map:i}=await google.maps.importLibrary("maps");c={lat:37.4161493,lng:-122.0812166},a=new i(document.getElementById("map"),{center:c,zoom:11,mapId:"DEMO_MAP_ID"}),u()}async function u(){const{Place:i}=await google.maps.importLibrary("places"),{AdvancedMarkerElement:r}=await google.maps.importLibrary("marker"),s={textQuery:"Tacos in Mountain View",fields:["displayName","location","businessStatus"],includedType:"restaurant",locationBias:{lat:37.4161493,lng:-122.0812166},isOpenNow:!0,language:"en-US",maxResultCount:8,minRating:3.2,region:"us",useStrictTypeFiltering:!1},{places:n}=await i.searchByText(s);if(n.length){console.log(n);const{LatLngBounds:e}=await google.maps.importLibrary("core"),t=new e;n.forEach(o=>{new r({map:a,position:o.location,title:o.displayName}),t.extend(o.location),console.log(o)}),a.fitBounds(t)}else console.log("No results")}l();
diff --git a/dist/samples/place-text-search/dist/assets/index-D3DoV7sY.js b/dist/samples/place-text-search/dist/assets/index-D3DoV7sY.js
new file mode 100644
index 00000000..35031897
--- /dev/null
+++ b/dist/samples/place-text-search/dist/assets/index-D3DoV7sY.js
@@ -0,0 +1,5 @@
+(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const r of t.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&i(r)}).observe(document,{childList:!0,subtree:!0});function s(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function i(e){if(e.ep)return;e.ep=!0;const t=s(e);fetch(e.href,t)}})();/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */let a,l={},u;async function p(){const{Map:c,InfoWindow:n}=await google.maps.importLibrary("maps"),s={lat:37.4161493,lng:-122.0812166};a=new c(document.getElementById("map"),{center:s,zoom:11,mapTypeControl:!1,mapId:"DEMO_MAP_ID"});const i=document.getElementById("text-input"),e=document.getElementById("text-input-button"),t=document.getElementById("text-input-card");a.controls[google.maps.ControlPosition.TOP_LEFT].push(t),e.addEventListener("click",()=>{m(i.value)}),i.addEventListener("keydown",r=>{r.key==="Enter"&&m(i.value)}),u=new google.maps.InfoWindow}async function m(c){const{Place:n}=await google.maps.importLibrary("places"),{AdvancedMarkerElement:s}=await google.maps.importLibrary("marker"),i={textQuery:c,fields:["displayName","location","businessStatus"],includedType:"",useStrictTypeFiltering:!0,locationBias:a.center,isOpenNow:!0,language:"en-US",maxResultCount:8,minRating:1,region:"us"},{places:e}=await n.searchByText(i);if(e.length){const{LatLngBounds:t}=await google.maps.importLibrary("core"),r=new t;for(const o in l)l[o].map=null;l={},e.forEach(o=>{const d=new s({map:a,position:o.location,title:o.displayName});l[o.id]=d,d.addListener("gmp-click",()=>{a.panTo(o.location),f(o.displayName,o.id,d)}),o.location!=null&&r.extend(o.location)}),a.fitBounds(r)}else console.log("No results")}async function f(c,n,s){u.setContent(n),u.setHeaderContent(c),u.open({map:a,anchor:s,shouldFocus:!1})}p();
diff --git a/dist/samples/place-text-search/dist/assets/index-kz-ac4rW.css b/dist/samples/place-text-search/dist/assets/index-kz-ac4rW.css
deleted file mode 100644
index c4e6ccdb..00000000
--- a/dist/samples/place-text-search/dist/assets/index-kz-ac4rW.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */#map{height:100%}html,body{height:100%;margin:0;padding:0}
diff --git a/dist/samples/place-text-search/dist/index.html b/dist/samples/place-text-search/dist/index.html
index f0097ebf..4e178c4b 100644
--- a/dist/samples/place-text-search/dist/index.html
+++ b/dist/samples/place-text-search/dist/index.html
@@ -9,10 +9,14 @@
Text Search
-
-
+
+
+
+
+
+
diff --git a/dist/samples/place-text-search/docs/index.html b/dist/samples/place-text-search/docs/index.html
index 2e1417a3..b641c55d 100644
--- a/dist/samples/place-text-search/docs/index.html
+++ b/dist/samples/place-text-search/docs/index.html
@@ -13,6 +13,10 @@
+
+
+
+
diff --git a/dist/samples/place-text-search/docs/index.js b/dist/samples/place-text-search/docs/index.js
index 9beb76eb..d80cc231 100644
--- a/dist/samples/place-text-search/docs/index.js
+++ b/dist/samples/place-text-search/docs/index.js
@@ -6,49 +6,73 @@
*/
// [START maps_place_text_search]
let map;
-let center;
+let markers = {};
+let infoWindow;
async function initMap() {
- const { Map } = await google.maps.importLibrary("maps");
- center = { lat: 37.4161493, lng: -122.0812166 };
+ const { Map, InfoWindow } = await google.maps.importLibrary("maps");
+ const center = { lat: 37.4161493, lng: -122.0812166 };
map = new Map(document.getElementById('map'), {
center: center,
zoom: 11,
+ mapTypeControl: false,
mapId: 'DEMO_MAP_ID',
});
- findPlaces();
+ const textInput = document.getElementById('text-input');
+ const textInputButton = document.getElementById('text-input-button');
+ const card = document.getElementById('text-input-card');
+ 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");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// [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");
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,
});
- bounds.extend(place.location);
- console.log(place);
+ markers[place.id] = marker;
+ marker.addListener('gmp-click', () => {
+ map.panTo(place.location);
+ updateInfoWindow(place.displayName, place.id, marker);
+ });
+ if (place.location != null) {
+ bounds.extend(place.location);
+ }
});
map.fitBounds(bounds);
}
@@ -56,5 +80,15 @@ async function findPlaces() {
console.log('No results');
}
}
+// 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/dist/samples/place-text-search/docs/index.ts b/dist/samples/place-text-search/docs/index.ts
index d4b676f1..5070a438 100644
--- a/dist/samples/place-text-search/docs/index.ts
+++ b/dist/samples/place-text-search/docs/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/dist/samples/place-text-search/docs/style.css b/dist/samples/place-text-search/docs/style.css
index 53491729..9dbc92ef 100644
--- a/dist/samples/place-text-search/docs/style.css
+++ b/dist/samples/place-text-search/docs/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
diff --git a/dist/samples/place-text-search/jsfiddle/demo.css b/dist/samples/place-text-search/jsfiddle/demo.css
index 9957f310..41fa4468 100644
--- a/dist/samples/place-text-search/jsfiddle/demo.css
+++ b/dist/samples/place-text-search/jsfiddle/demo.css
@@ -22,3 +22,38 @@ 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
+}
+
diff --git a/dist/samples/place-text-search/jsfiddle/demo.html b/dist/samples/place-text-search/jsfiddle/demo.html
index 43be44aa..d8aff6f4 100644
--- a/dist/samples/place-text-search/jsfiddle/demo.html
+++ b/dist/samples/place-text-search/jsfiddle/demo.html
@@ -13,6 +13,10 @@
+
+
+
+
diff --git a/dist/samples/place-text-search/jsfiddle/demo.js b/dist/samples/place-text-search/jsfiddle/demo.js
index b97eb520..1619e6ae 100644
--- a/dist/samples/place-text-search/jsfiddle/demo.js
+++ b/dist/samples/place-text-search/jsfiddle/demo.js
@@ -6,49 +6,73 @@
*/
let map;
-let center;
+let markers = {};
+let infoWindow;
async function initMap() {
- const { Map } = await google.maps.importLibrary("maps");
- center = { lat: 37.4161493, lng: -122.0812166 };
+ const { Map, InfoWindow } = await google.maps.importLibrary("maps");
+ const center = { lat: 37.4161493, lng: -122.0812166 };
map = new Map(document.getElementById('map'), {
center: center,
zoom: 11,
+ mapTypeControl: false,
mapId: 'DEMO_MAP_ID',
});
- findPlaces();
+ const textInput = document.getElementById('text-input');
+ const textInputButton = document.getElementById('text-input-button');
+ const card = document.getElementById('text-input-card');
+ 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");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
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);
if (places.length) {
- console.log(places);
const { LatLngBounds } = await google.maps.importLibrary("core");
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,
});
- bounds.extend(place.location);
- console.log(place);
+ markers[place.id] = marker;
+ marker.addListener('gmp-click', () => {
+ map.panTo(place.location);
+ updateInfoWindow(place.displayName, place.id, marker);
+ });
+ if (place.location != null) {
+ bounds.extend(place.location);
+ }
});
map.fitBounds(bounds);
}
@@ -56,5 +80,15 @@ async function findPlaces() {
console.log('No results');
}
}
+// 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();
diff --git a/package-lock.json b/package-lock.json
index 4010eaff..f9d13406 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2515,11 +2515,11 @@
"version": "1.0.0",
"dependencies": {
"@googlemaps/js-api-loader": "^1.16.8",
- "terra-draw": "*",
- "terra-draw-google-maps-adapter": "*"
+ "terra-draw": "latest",
+ "terra-draw-google-maps-adapter": "latest"
},
"devDependencies": {
- "@types/google.maps": "*",
+ "@types/google.maps": "latest",
"typescript": "^5.0.0",
"vite": "^7.0.6"
}