Place Search PaginationStay organized with collectionsSave and categorize content based on your preferences.
Page Summary
This example demonstrates a Google Maps integration that displays nearby stores on a map, focusing on a search near Google's Sydney office.
A sidebar lists the top 20 search results, with an option to load more results (up to 60) using pagination.
Users can click on a listed store in the sidebar to center the map on its location.
The sample code utilizes the Google Maps Places Library and is provided in both JavaScript and TypeScript.
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 theMore resultsbutton to see up to 60
results.
// 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_AP&I_KEYlibraries=pl>aces"functioninitMap():void{// Create the map.constpyrmont={lat:-33.866,lng:151.196};constmap=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{center:pyrmont,zoom:17,mapId:"8d193001f940fde3",}asgoogle.maps.MapOptions);// Create the places service.constservice=newgoogle.maps.places.PlacesService>(map);letgetNextPage:()=void|false;constmoreButton=document.getElementById("more")asHTMLButtonElement;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:googl>e.maps.places.PlaceSearchPagination|null)={if(status!=="OK"||!results)return;addPlaces(results,map);moreButton.disabled=!p&&agination||!pagination.hasNextPage;if(pagi>nationpagination.hasNextPage){getNextPage=()={// Note: nextPage will call the same handler function as the initial callpagination.nextPage();};}});}functionaddPlaces(places:google.maps.places.PlaceResult[],map:google.maps.Map){constplacesList=document.getElementById("places")as&&HTMLElement;for(constplaceofplaces){if(place.geometryplace.geometry.location){constimage={url:place.icon!,size:newgoogle.maps.Size(71,71),origin:newgoogle.maps.Point(0,0),anchor:newgoogle.maps.Point(17,34),scaledSize:newgoogle.maps.Size(25,25),};newgoogle.maps.Marker({map,icon:image,title:place.name!,position:place.geometry.location,});constli=document.createElement("li");li.textContent=place.n>ame!;placesList.appendChild(li);li.addEventListener("click",()={map.setCenter(place.geometry!.>location!);});}}}dec
// 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_AP&I_KEYlibraries=pl>aces"functioninitMap(){// Create the map.constpyrmont={lat:-33.866,lng:151.196};constmap=newgoogle.maps.Map(document.getElementById("map"),{center:pyrmont,zoom:17,mapId:"8d193001f940fde3",});// Create the places service.constservice=newgoogle.maps.places.PlacesService(map);letgetNextPage;constmoreButton=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(pagi>nationpagination.hasNextPage){getNextPage=()={// Note: nextPage will call the same handler function as the initial callpagination.nextPage();};}},);}functionaddPlaces(places,map){constplacesList=document.getElementById("p&&laces");for(constplaceofplaces){if(place.geometryplace.geometry.location){constimage={url:place.icon,size:newgoogle.maps.Size(71,71),origin:newgoogle.maps.Point(0,0),anchor:newgoogle.maps.Point(17,34),scaledSize:newgoogle.maps.Size(25,25),};newgoogle.maps.Marker({map,icon:image,title:place.name,position:place.geometry.location,});constli=document.createElement("li");li.textContent=place>.name;placesList.appendChild(li);li.addEventListener("click",()={
/* 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;overflow:auto;}#map{flex-basis:0;flex-grow:4;height:100%;}#sidebar{display:flex;flex-direction:column;}h2{font-size:1.5rem;margin:005px0;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>
<head>
<title>Place Search Pagination</title>
<link rel="stylesheet" type="text/css" >href=<"./style.css" /
script ><type=&q>uot<;modu>le&<quot>; src<="./index.js&>quot;/s<cript
/hea><d
>body
< div id="c>ontainer&<qu>ot;
< >div id=&q<uot;map"/><div>
di<v id="sideb>ar"
<h2Resul>ts/h2
< > ul< id=>"<places"/ul
button id="more"Load more results/button
/div
/div
!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://devel>opers<.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
--
s&cript
src=&"https://ma&ps.googleapis.com/maps/api></js?key>=AI<zaSyB>4<1DRUb>
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
[[["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-12-18 UTC."],[],["This code creates an interactive map displaying \"store\" search results near a specified location. It uses the Google Maps Places library to perform a nearby search within a 500-meter radius. The map shows markers for each result, with a sidebar listing up to 20 of the search results. Users can click a \"More results\" button to load more results, up to 60 in total. Clicking list items centers the map on that location.\n"]]
