Skip to content

Commit 9bfe7ba

Browse files
willum070willum070
committed
feat: Adds input to text search demo.
1 parent ff1c02d commit 9bfe7ba

File tree

3 files changed

+93
-14
lines changed

3 files changed

+93
-14
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: 54 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,58 +6,88 @@
66

77
// [START maps_place_text_search]
88
let map;
9+
let marker;
10+
let markers = {};
911
let center;
12+
let textInput;
13+
let textInputButton;
14+
let infoWindow;
1015

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

1419
center = { lat: 37.4161493, lng: -122.0812166 };
1520
map = new Map(document.getElementById('map') as HTMLElement, {
1621
center: center,
1722
zoom: 11,
23+
mapTypeControl: false,
1824
mapId: 'DEMO_MAP_ID',
1925
});
2026

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

24-
async function findPlaces() {
45+
async function findPlaces(query) {
2546
const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
2647
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
2748
// [START maps_place_text_search_request]
2849
const request = {
29-
textQuery: 'Tacos in Mountain View',
50+
textQuery: query,
3051
fields: ['displayName', 'location', 'businessStatus'],
31-
includedType: 'restaurant',
32-
locationBias: { lat: 37.4161493, lng: -122.0812166 },
52+
includedType: '', // Restrict query to a specific type (leave blank for any).
53+
useStrictTypeFiltering: true,
54+
locationBias: map.center,
3355
isOpenNow: true,
3456
language: 'en-US',
3557
maxResultCount: 8,
36-
minRating: 3.2,
58+
minRating: 1, // Specify a minimum rating.
3759
region: 'us',
38-
useStrictTypeFiltering: false,
3960
};
4061

41-
//@ts-ignore
4262
const { places } = await Place.searchByText(request);
4363
// [END maps_place_text_search_request]
4464

4565
if (places.length) {
46-
console.log(places);
47-
4866
const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
4967
const bounds = new LatLngBounds();
68+
69+
// First remove all existing markers.
70+
for (marker in markers) {
71+
marker.map = null;
72+
}
73+
markers = {};
5074

5175
// Loop through and get all the results.
52-
places.forEach((place) => {
53-
const markerView = new AdvancedMarkerElement({
76+
places.forEach(place => {
77+
const marker = new AdvancedMarkerElement({
5478
map,
5579
position: place.location,
5680
title: place.displayName,
5781
});
82+
markers[place.id] = marker;
83+
84+
marker.addListener('gmp-click', () => {
85+
console.log(`${place.displayName}: ${place.id}`);
86+
map.panTo(place.location);
87+
updateInfoWindow(`<b>${place.displayName}</b>: ${place.id}`, marker);
88+
});
5889

5990
bounds.extend(place.location as google.maps.LatLng);
60-
console.log(place);
6191
});
6292

6393
map.fitBounds(bounds);
@@ -67,5 +97,15 @@ async function findPlaces() {
6797
}
6898
}
6999

100+
// Helper function to create an info window.
101+
async function updateInfoWindow(content, anchor) {
102+
infoWindow.setContent(content);
103+
infoWindow.open({
104+
map,
105+
anchor,
106+
shouldFocus: false,
107+
});
108+
}
109+
70110
initMap();
71111
// [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)