Place search pagination

by nnur ffarazi

HTML

<div id="map"></div>

<!-- 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>

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;
}

#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;
}

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">

var map;
 var pyrmont = {
    lat: -33.866,
    lng: 151.196
  };
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 4
  });
  console.log(map.getCenter());
  console.log(map.getBounds());

  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');

  bounds.extend(map.getCenter());
  map.fitBounds(bounds);
  var bounds = new google.maps.LatLngBounds();
  bounds = map.getBounds();
  var ne = bounds.getNorthEast();
  var sw = bounds.getSouthWest();

  var QLat = Math.abs((ne.lat() - sw.lat()) / 5);
  var QLng = Math.abs((sw.lng() - ne.lng()) / 5);

  var swLat = sw.lat() + QLat;
  var swLng = sw.lng() + QLng;

  var neLat = ne.lat() - QLat;
  var neLng = ne.lng() - QLng;

  ne = new google.maps.LatLng(neLat, neLng);
  sw = new google.maps.LatLng(swLat, swLng);

  var Coords = [
    ne, new google.maps.LatLng(ne.lat(), sw.lng()),
    sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
  ];
  surface = new google.maps.Polygon({
    paths: Coords,
    strokeColor: '#00AAFF',
    strokeOpacity: 0.6,
    strokeWeight:...