Skip to content

feat: Adds text input to text search demo #670

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
willum070 wants to merge 6 commits into from
Closed

feat: Adds text input to text search demo #670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e3c5247
Update Place UI Kit Text and Nearby Search demos
ejhaselden Jul 17, 2025
7d00615
Update index.html
ejhaselden Jul 18, 2025
33b670b
Update index.html
ejhaselden Jul 21, 2025
303da54
Update index.ts
ejhaselden Jul 28, 2025
c9a0365
feat: Adds text input to Place text search demo.
willum070 Jun 18, 2025
4ca24bc
Merge branch 'main' into text-search-refresh
willum070 Jul 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions samples/place-text-search/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="text-input-card">
<input type="text" id="text-input" placeholder="Search for a place"></input>
<input type="button" id="text-input-button" value="Search"></input>
</div>
<div id="map"></div>

<!-- prettier-ignore -->
Expand Down
68 changes: 54 additions & 14 deletions samples/place-text-search/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,58 +6,88 @@

// [START maps_place_text_search]
let map;
let marker;
let markers = {};
let center;
let textInput;
let textInputButton;
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 };
map = new Map(document.getElementById('map') as HTMLElement, {
center: center,
zoom: 11,
mapTypeControl: false,
mapId: 'DEMO_MAP_ID',
});

findPlaces();
textInput = document.getElementById('text-input') as HTMLInputElement;
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 (marker in markers) {
marker.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', () => {
console.log(`${place.displayName}: ${place.id}`);
map.panTo(place.location);
updateInfoWindow(`<b>${place.displayName}</b>: ${place.id}`, marker);
});

bounds.extend(place.location as google.maps.LatLng);
console.log(place);
});

map.fitBounds(bounds);
Expand All @@ -67,5 +97,15 @@ async function findPlaces() {
}
}

// Helper function to create an info window.
async function updateInfoWindow(content, anchor) {
infoWindow.setContent(content);
infoWindow.open({
map,
anchor,
shouldFocus: false,
});
}

initMap();
// [END maps_place_text_search]
35 changes: 35 additions & 0 deletions samples/place-text-search/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] */
65 changes: 39 additions & 26 deletions samples/ui-kit-place-search-nearby/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,55 @@
SPDX-License-Identifier: Apache-2.0
-->
<!--[START maps_ui_kit_place_search_nearby] -->
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<title>Place List Nearby Search with Google Maps</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Place Nearby Search with Google Maps</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<!--[START maps_ui_kit_place_search_nearby_map] -->
<gmp-map center="-37.813,144.963" zoom="10" map-id="DEMO_MAP_ID">
<div class="overlay" slot="control-inline-start-block-start">
<div class="controls">
<select name="types" class="type-select">
<option value="">Select a place type</option>
<option value="cafe">Cafe</option>
<option value="restaurant">Restaurant</option>
<option value="electric_vehicle_charging_station">
EV charging station
</option>
</select>
</div>
<div class="list-container">
<gmp-place-list selectable style="display: none;"></gmp-place-list>
</div>
</div>
</gmp-map>
<div id="map-container"></div>
<div class="controls">
<select name="types" class="type-select">
<option value="">Select a place type</option>
<option value="cafe">Cafe</option>
<option value="restaurant">Restaurant</option>
<option value="electric_vehicle_charging_station">EV charging station</option>
</select>
</div>
<div class="list-container">
<gmp-place-search orientation="vertical" selectable>
<gmp-place-all-content> </gmp-place-all-content>
<gmp-place-nearby-search-request location-restriction="1000@-37.813, 144.963">
</gmp-place-nearby-search-request>
</gmp-place-search>
</div>

<gmp-place-details style="display: none;">
<gmp-place-details-place-request></gmp-place-details-place-request>
<gmp-place-all-content></gmp-place-all-content>
</gmp-place-details>
<div id="details-container">
<gmp-place-details-compact orientation="horizontal" truncation-preferred>
<gmp-place-details-place-request
place="places/ChIJ3S-JXmauEmsRUcIaWtf4MzE"
></gmp-place-details-place-request>
<gmp-place-content-config>
<gmp-place-media></gmp-place-media>
<gmp-place-rating></gmp-place-rating>
<gmp-place-price></gmp-place-price>
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
<gmp-place-open-now-status></gmp-place-open-now-status>
<gmp-place-attribution
light-scheme-color="gray"
dark-scheme-color="white"
></gmp-place-attribution>
</gmp-place-content-config>
</gmp-place-details-compact>
</div>

<!--[END maps_ui_kit_place_search_nearby_map] -->
<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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha"});</script>
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</body>
</html>
<!--[END maps_ui_kit_place_search_nearby] -->
Loading