Stay organized with collections Save and categorize content based on your preferences.
This example uses searchByText to query for taco restaurants in the Mountain View vicinity, and populates a map with markers to show the results.
Read the documentation.
TypeScriptlet map;
let center;
async function initMap() {
const { Map } = 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,
mapId: 'DEMO_MAP_ID',
});
findPlaces();
}
async function findPlaces() {
const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
const request = {
textQuery: 'Tacos in Mountain View',
fields: ['displayName', 'location', 'businessStatus'],
includedType: 'restaurant',
locationBias: { lat: 37.4161493, lng: -122.0812166 },
isOpenNow: true,
language: 'en-US',
maxResultCount: 8,
minRating: 3.2,
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") as google.maps.CoreLibrary;
const bounds = new LatLngBounds();
// Loop through and get all the results.
places.forEach((place) => {
const markerView = new AdvancedMarkerElement({
map,
position: place.location,
title: place.displayName,
});
bounds.extend(place.location as google.maps.LatLng);
console.log(place);
});
map.fitBounds(bounds);
} else {
console.log('No results');
}
}
initMap();Note: Read the guide on using TypeScript and Google Maps. JavaScript
let map;
let center;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
center = { lat: 37.4161493, lng: -122.0812166 };
map = new Map(document.getElementById("map"), {
center: center,
zoom: 11,
mapId: "DEMO_MAP_ID",
});
findPlaces();
}
async function findPlaces() {
const { Place } = await google.maps.importLibrary("places");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
const request = {
textQuery: "Tacos in Mountain View",
fields: ["displayName", "location", "businessStatus"],
includedType: "restaurant",
locationBias: { lat: 37.4161493, lng: -122.0812166 },
isOpenNow: true,
language: "en-US",
maxResultCount: 8,
minRating: 3.2,
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();
// Loop through and get all the results.
places.forEach((place) => {
const markerView = new AdvancedMarkerElement({
map,
position: place.location,
title: place.displayName,
});
bounds.extend(place.location);
console.log(place);
});
map.fitBounds(bounds);
} else {
console.log("No results");
}
}
initMap();Note: The JavaScript is compiled from the TypeScript snippet. CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
HTML
<html>
<head>
<title>Text Search</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
</body>
</html> Try Sample Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone -b sample-place-text-search https://github.com/googlemaps/js-samples.gitcd js-samplesnpm inpm start
Other samples can be tried by switching to any branch beginning with sample-SAMPLE_NAME.
Use the Place Overview componentgit checkout sample-SAMPLE_NAMEnpm inpm start
The Place Overview component displays detailed information about millions of businesses, including opening hours, star reviews, and photos, plus directions and other actions in a premade UI in 5 sizes and formats. It is part of the Extended Component Library, from Google Maps Platform, a set of web components that helps developers build better maps and location features faster.
Use the Place Overview configurator to create embeddable code for a custom Place Overview component, then export it to be used with popular frameworks like React and Angular or no framework at all.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-07-09 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-09 UTC."],[[["The sample demonstrates using the `searchByText` function to find taco restaurants near Mountain View, California."],["It displays the search results as markers on a map, automatically adjusting the map's view to encompass all found locations."],["The sample code is provided in both TypeScript and JavaScript, showcasing how to integrate Google Maps Platform functionalities into your web application."],["Users can further explore the functionality by cloning the sample code and running it locally using Git and Node.js or by trying it on JSFiddle or Google Cloud Shell."],["As an alternative, consider utilizing the Place Overview component from the Extended Component Library for a pre-built user interface to display detailed place information."]]],["The code initializes a Google Map centered on Mountain View. It uses `searchByText` to find taco restaurants within that area, filtering results to only include open restaurants, with a minimum rating of 3.2. Up to 8 results are displayed. Markers are added to the map for each found location, and the map bounds are adjusted to encompass all markers. The HTML, CSS files set up the page structure and map's style.\n"]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4