Read the documentation or view this example full screen.
// 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"> var map; function initMap() { var pyrmont = {lat: -33.866, lng: 151.196}; map = new google.maps.Map(document.getElementById('map'), { center: pyrmont, zoom: 17 }); var service = new google.maps.places.PlacesService(map); service.nearbySearch({ location: pyrmont, radius: 500, type: ['store'] }, processResults); } function processResults(results, status, pagination) { if (status !== google.maps.places.PlacesServiceStatus.OK) { return; } else { createMarkers(results); if (pagination.hasNextPage) { var moreButton = document.getElementById('more'); moreButton.disabled = false; moreButton.addEventListener('click', function() { moreButton.disabled = true; pagination.nextPage(); }); } } } function createMarkers(places) { var bounds = new google.maps.LatLngBounds(); var placesList = document.getElementById('places'); for (var i = 0, place; place = places[i]; i++) { var 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) }; var marker = new google.maps.Marker({ map: map, icon: image, title: place.name, position: place.geometry.location }); placesList.innerHTML += '<li>' + place.name + '</li>'; bounds.extend(place.geometry.location); } map.fitBounds(bounds); }
<div id="map"></div> <div id="right-panel"> <h2>Results</h2> <ul id="places"></ul> <button id="more">More results</button> </div>
/* 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; }
#right-panel { font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #right-panel select, #right-panel input { font-size: 15px; } #right-panel select { width: 100%; } #right-panel i { font-size: 12px; }
#right-panel { font-family: Arial, Helvetica, sans-serif; position: absolute; right: 5px; top: 60%; margin-top: -195px; height: 330px; width: 200px; padding: 5px; z-index: 5; border: 1px solid #999; background: #fff; } h2 { font-size: 22px; margin: 0 0 5px 0; } ul { list-style-type: none; padding: 0; margin: 0; height: 271px; width: 200px; overflow-y: scroll; } li { background-color: #f1f1f1; padding: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } li:nth-child(odd) { background-color: #fcfcfc; } #more { width: 100%; margin: 5px 0 0 0; }
<!-- Replace the value of the key parameter with your own API key. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>
Cobalah sendiri
Arahkan ke atas kanan blok kode untuk menyalin kode atau membukanya dalam JSFiddle.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Place search pagination</title> <style> /* 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; } #right-panel { font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #right-panel select, #right-panel input { font-size: 15px; } #right-panel select { width: 100%; } #right-panel i { font-size: 12px; } #right-panel { font-family: Arial, Helvetica, sans-serif; position: absolute; right: 5px; top: 60%; margin-top: -195px; height: 330px; width: 200px; padding: 5px; z-index: 5; border: 1px solid #999; background: #fff; } h2 { font-size: 22px; margin: 0 0 5px 0; } ul { list-style-type: none; padding: 0; margin: 0; height: 271px; width: 200px; overflow-y: scroll; } li { background-color: #f1f1f1; padding: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } li:nth-child(odd) { background-color: #fcfcfc; } #more { width: 100%; margin: 5px 0 0 0; } </style> <script> // 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"> var map; function initMap() { var pyrmont = {lat: -33.866, lng: 151.196}; map = new google.maps.Map(document.getElementById('map'), { center: pyrmont, zoom: 17 }); var service = new google.maps.places.PlacesService(map); service.nearbySearch({ location: pyrmont, radius: 500, type: ['store'] }, processResults); } function processResults(results, status, pagination) { if (status !== google.maps.places.PlacesServiceStatus.OK) { return; } else { createMarkers(results); if (pagination.hasNextPage) { var moreButton = document.getElementById('more'); moreButton.disabled = false; moreButton.addEventListener('click', function() { moreButton.disabled = true; pagination.nextPage(); }); } } } function createMarkers(places) { var bounds = new google.maps.LatLngBounds(); var placesList = document.getElementById('places'); for (var i = 0, place; place = places[i]; i++) { var 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) }; var marker = new google.maps.Marker({ map: map, icon: image, title: place.name, position: place.geometry.location }); placesList.innerHTML += '<li>' + place.name + '</li>'; bounds.extend(place.geometry.location); } map.fitBounds(bounds); } </script> </head> <body> <div id="map"></div> <div id="right-panel"> <h2>Results</h2> <ul id="places"></ul> <button id="more">More results</button> </div> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script> </body> </html>