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 ! ); }); } } } declare global { interface Window { initMap : () = > void ; } } window . initMap = initMap ;
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 ); }); } } } window . initMap = initMap ;
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 : 5 rem ; flex-grow : 1 ; padding : 1 rem ; max-width : 30 rem ; 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.5 rem ; margin : 0 0 5 px 0 ; flex-grow : 0 ; } ul { list-style-type : none ; padding : 0 ; margin : 0 ; overflow-y : scroll ; flex-grow : 1 ; } li { background-color : #f1f1f1 ; padding : 10 px ; text-overflow : ellipsis ; white-space : nowrap ; overflow : hidden ; font-size : 1.25 rem ; cursor : pointer ; } li : nth-child ( odd ) { background-color : #fcfcfc ; } button { width : 100 % ; padding : 1 rem ; flex-grow : 0 ; cursor : pointer ; background : #1a73e8 ; font-size : 1.5 rem ; color : white ; border : none ; } button : hover { color : #c5d4f0 ; } button : disabled { background-color : #9fc1ee ; color : #c5d4f0 ; cursor : auto ; }
HTML
<html> <head> <title>Place Search Pagination</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" 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> <!-- 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://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=places&v=weekly" defer ></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 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
.
git checkout sample - SAMPLE_NAMEnpm inpm start
