Skip to content

Commit a584239

Browse files
willum070willum070
authored
feat: Adds input to text search demo. (#671)
* feat: Adds input to text search demo. * Update index.ts fixes marker removal (it must operate on the marker array) * fix marker deletion block Updates the marker deletion block to use code that actually works. * Updates index.ts based on review comments * Updates infowindow code to add title separately * Consolidates textInput/textInputButton vars Removes extra declaration and set as const. * moves marker var into initMap * removes superflous template literal markup also removes log line that is not needed. * adds null check to avoid casting
1 parent ff1c02d commit a584239

File tree

3 files changed

+94
-17
lines changed

3 files changed

+94
-17
lines changed

‎samples/place-text-search/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
<script type="module" src="./index.js"></script>
1414
</head>
1515
<body>
16+
<div id="text-input-card">
17+
<input type="text" id="text-input" placeholder="Search for a place"></input>
18+
<input type="button" id="text-input-button" value="Search"></input>
19+
</div>
1620
<div id="map"></div>
1721

1822
<!-- prettier-ignore -->

‎samples/place-text-search/index.ts‎

Lines changed: 55 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,58 +6,85 @@
66

77
// [START maps_place_text_search]
88
let map;
9-
let center;
9+
let markers = {};
10+
let infoWindow;
1011

1112
async function initMap() {
12-
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
13+
const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
1314

14-
center = { lat: 37.4161493, lng: -122.0812166 };
15+
const center = { lat: 37.4161493, lng: -122.0812166 };
1516
map = new Map(document.getElementById('map') as HTMLElement, {
1617
center: center,
1718
zoom: 11,
19+
mapTypeControl: false,
1820
mapId: 'DEMO_MAP_ID',
1921
});
2022

21-
findPlaces();
23+
const textInput = document.getElementById('text-input') as HTMLInputElement;
24+
const textInputButton = document.getElementById('text-input-button') as HTMLButtonElement;
25+
const card = document.getElementById('text-input-card') as HTMLElement;
26+
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
27+
28+
textInputButton.addEventListener('click', () => {
29+
findPlaces(textInput.value);
30+
});
31+
32+
textInput.addEventListener('keydown', (event) => {
33+
if (event.key === 'Enter') {
34+
findPlaces(textInput.value);
35+
}
36+
});
37+
38+
infoWindow = new google.maps.InfoWindow();
2239
}
2340

24-
async function findPlaces() {
41+
async function findPlaces(query) {
2542
const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
2643
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
2744
// [START maps_place_text_search_request]
2845
const request = {
29-
textQuery: 'Tacos in Mountain View',
46+
textQuery: query,
3047
fields: ['displayName', 'location', 'businessStatus'],
31-
includedType: 'restaurant',
32-
locationBias: { lat: 37.4161493, lng: -122.0812166 },
48+
includedType: '', // Restrict query to a specific type (leave blank for any).
49+
useStrictTypeFiltering: true,
50+
locationBias: map.center,
3351
isOpenNow: true,
3452
language: 'en-US',
3553
maxResultCount: 8,
36-
minRating: 3.2,
54+
minRating: 1, // Specify a minimum rating.
3755
region: 'us',
38-
useStrictTypeFiltering: false,
3956
};
4057

41-
//@ts-ignore
4258
const { places } = await Place.searchByText(request);
4359
// [END maps_place_text_search_request]
4460

4561
if (places.length) {
46-
console.log(places);
47-
4862
const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
4963
const bounds = new LatLngBounds();
64+
65+
// First remove all existing markers.
66+
for (const id in markers) {
67+
markers[id].map = null;
68+
};
69+
markers = {};
5070

5171
// Loop through and get all the results.
52-
places.forEach((place) => {
53-
const markerView = new AdvancedMarkerElement({
72+
places.forEach(place => {
73+
const marker = new AdvancedMarkerElement({
5474
map,
5575
position: place.location,
5676
title: place.displayName,
5777
});
78+
markers[place.id] = marker;
79+
80+
marker.addListener('gmp-click', () => {
81+
map.panTo(place.location);
82+
updateInfoWindow(place.displayName, place.id, marker);
83+
});
5884

59-
bounds.extend(place.location as google.maps.LatLng);
60-
console.log(place);
85+
if (place.location != null) {
86+
bounds.extend(place.location);
87+
}
6188
});
6289

6390
map.fitBounds(bounds);
@@ -67,5 +94,16 @@ async function findPlaces() {
6794
}
6895
}
6996

97+
// Helper function to create an info window.
98+
async function updateInfoWindow(title, content, anchor) {
99+
infoWindow.setContent(content);
100+
infoWindow.setHeaderContent(title);
101+
infoWindow.open({
102+
map,
103+
anchor,
104+
shouldFocus: false,
105+
});
106+
}
107+
70108
initMap();
71109
// [END maps_place_text_search]

‎samples/place-text-search/style.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,39 @@ body {
2222
padding: 0;
2323
}
2424

25+
#text-input-card {
26+
width: 25%;
27+
background-color: #fff;
28+
border-radius: 5px;
29+
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
30+
margin: 10px;
31+
padding: 5px;
32+
font-family: Roboto, sans-serif;
33+
font-size: large;
34+
font-weight: bold;
35+
}
36+
37+
#text-input {
38+
width: 100%;
39+
padding: 10px;
40+
margin: 0;
41+
box-sizing: border-box;
42+
}
43+
44+
#text-input-button {
45+
display: inline-block;
46+
margin-top: .5rem;
47+
width: auto;
48+
padding: .6rem .75rem;
49+
font-size: .875rem;
50+
font-weight: 500;
51+
color: #fff;
52+
background-color: #2563eb;
53+
border: none;
54+
border-radius: .375rem;
55+
cursor: pointer;
56+
transition: background-color .15s ease-in-out;
57+
text-align: center
58+
}
59+
2560
/* [END maps_place_text_search] */

0 commit comments

Comments
 (0)