This example creates a map that displays the search results for "stores" near Google's office in Sydney, Australia. A sidebar on the right lists the top 20 results, and users can click the More results button to see up to 60 results.
Read the documentation.
TypeScript
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap(): void {
// Create the map.
const pyrmont = { lat: -33.866, lng: 151.196 };
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
center: pyrmont,
zoom: 17,
mapId: "8d193001f940fde3",
} as google.maps.MapOptions
);
// Create the places service.
const service = new google.maps.places.PlacesService(map);
let getNextPage: () => void | false;
const moreButton = document.getElementById("more") as HTMLButtonElement;
moreButton.onclick = function () {
moreButton.disabled = true;
if (getNextPage) {
getNextPage();
}
};
// Perform a nearby search.
service.nearbySearch(
{ location: pyrmont, radius: 500, type: "store" },
(
results: google.maps.places.PlaceResult[] | null,
status: google.maps.places.PlacesServiceStatus,
pagination: google.maps.places.PlaceSearchPagination | null
) => {
if (status !== "OK" || !results) return;
addPlaces(results, map);
moreButton.disabled = !pagination || !pagination.hasNextPage;
if (pagination && pagination.hasNextPage) {
getNextPage = () => {
// Note: nextPage will call the same handler function as the initial call
pagination.nextPage();
};
}
}
);
}
function addPlaces(
places: google.maps.places.PlaceResult[],
map: google.maps.Map
) {
const placesList = document.getElementById("places") as HTMLElement;
for (const place of places) {
if (place.geometry && place.geometry.location) {
const image = {
url: place.icon!,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25),
};
new google.maps.Marker({
map,
icon: image,
title: place.name!,
position: place.geometry.location,
});
const li = document.createElement("li");
li.textContent = place.name!;
placesList.appendChild(li);
li.addEventListener("click", () => {
map.setCenter(place.geometry!.location!);
});
}
}
}
JavaScript
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
// Create the map.
const pyrmont = { lat: -33.866, lng: 151.196 };
const map = new google.maps.Map(document.getElementById("map"), {
center: pyrmont,
zoom: 17,
mapId: "8d193001f940fde3",
});
// Create the places service.
const service = new google.maps.places.PlacesService(map);
let getNextPage;
const moreButton = document.getElementById("more");
moreButton.onclick = function () {
moreButton.disabled = true;
if (getNextPage) {
getNextPage();
}
};
// Perform a nearby search.
service.nearbySearch(
{ location: pyrmont, radius: 500, type: "store" },
(results, status, pagination) => {
if (status !== "OK" || !results) return;
addPlaces(results, map);
moreButton.disabled = !pagination || !pagination.hasNextPage;
if (pagination && pagination.hasNextPage) {
getNextPage = () => {
// Note: nextPage will call the same handler function as the initial call
pagination.nextPage();
};
}
}
);
}
function addPlaces(places, map) {
const placesList = document.getElementById("places");
for (const place of places) {
if (place.geometry && place.geometry.location) {
const image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25),
};
new google.maps.Marker({
map,
icon: image,
title: place.name,
position: place.geometry.location,
});
const li = document.createElement("li");
li.textContent = place.name;
placesList.appendChild(li);
li.addEventListener("click", () => {
map.setCenter(place.geometry.location);
});
}
}
}
CSS
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
display: flex;
}
#sidebar {
flex-basis: 5rem;
flex-grow: 1;
padding: 1rem;
max-width: 30rem;
height: 100%;
box-sizing: border-box;
display: flex;
overflow: auto;
}
#map {
flex-basis: 0;
flex-grow: 4;
height: 100%;
}
#sidebar {
display: flex;
flex-direction: column;
}
h2 {
font-size: 1.5rem;
margin: 0 0 5px 0;
flex-grow: 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: scroll;
flex-grow: 1;
}
li {
background-color: #f1f1f1;
padding: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 1.25rem;
cursor: pointer;
}
li:nth-child(odd) {
background-color: #fcfcfc;
}
button {
width: 100%;
padding: 1rem;
flex-grow: 0;
cursor: pointer;
background: #1a73e8;
font-size: 1.5rem;
color: white;
border: none;
}
button:hover {
color: #c5d4f0;
}
button:disabled {
background-color: #9fc1ee;
color: #c5d4f0;
cursor: auto;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Place Search Pagination</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./index.js"></script>
</head>
<body>
<div id="container">
<div id="map"></div>
<div id="sidebar">
<h2>Results</h2>
<ul id="places"></ul>
<button id="more">Load more results</button>
</div>
</div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places&v=weekly&map_ids=8d193001f940fde3"
async
></script>
</body>
</html>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=places">
function initMap() {
// Create the map.
const pyrmont = { lat: -33.866, lng: 151.196 };
const map = new google.maps.Map(document.getElementById("map"), {
center: pyrmont,
zoom: 17,
mapId: "8d193001f940fde3",
});
// Create the places service.
const service = new google.maps.places.PlacesService(map);
let getNextPage;
const moreButton = document.getElementById("more");
moreButton.onclick = function () {
moreButton.disabled = true;
if (getNextPage) {
getNextPage();
}
};
// Perform a nearby search.
service.nearbySearch(
{ location: pyrmont, radius: 500, type: "store" },
(results, status, pagination) => {
if (status !== "OK" || !results) return;
addPlaces(results, map);
moreButton.disabled = !pagination || !pagination.hasNextPage;
if (pagination && pagination.hasNextPage) {
getNextPage = () => {
// Note: nextPage will call the same handler function as the initial call
pagination.nextPage();
};
}
}
);
}
function addPlaces(places, map) {
const placesList = document.getElementById("places");
for (const place of places) {
if (place.geometry && place.geometry.location) {
const image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25),
};
new google.maps.Marker({
map,
icon: image,
title: place.name,
position: place.geometry.location,
});
const li = document.createElement("li");
li.textContent = place.name;
placesList.appendChild(li);
li.addEventListener("click", () => {
map.setCenter(place.geometry.location);
});
}
}
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
display: flex;
}
#sidebar {
flex-basis: 5rem;
flex-grow: 1;
padding: 1rem;
max-width: 30rem;
height: 100%;
box-sizing: border-box;
display: flex;
overflow: auto;
}
#map {
flex-basis: 0;
flex-grow: 4;
height: 100%;
}
#sidebar {
display: flex;
flex-direction: column;
}
h2 {
font-size: 1.5rem;
margin: 0 0 5px 0;
flex-grow: 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: scroll;
flex-grow: 1;
}
li {
background-color: #f1f1f1;
padding: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 1.25rem;
cursor: pointer;
}
li:nth-child(odd) {
background-color: #fcfcfc;
}
button {
width: 100%;
padding: 1rem;
flex-grow: 0;
cursor: pointer;
background: #1a73e8;
font-size: 1.5rem;
color: white;
border: none;
}
button:hover {
color: #c5d4f0;
}
button:disabled {
background-color: #9fc1ee;
color: #c5d4f0;
cursor: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Place Search Pagination</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="container">
<div id="map"></div>
<div id="sidebar">
<h2>Results</h2>
<ul id="places"></ul>
<button id="more">Load more results</button>
</div>
</div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=places&v=weekly&map_ids=8d193001f940fde3"
async
></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-search-pagination git@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.
git checkout sample-SAMPLE_NAMEnpm inpm start