title: More than 20 results by pagination with Google Places API
body: <p>Google's demo has this snippet to capture, by pagination, more than 20 results from place search:</p>
  
  <pre><code>    service.nearbySearch(request, resultList, function(status, results, pagination) {
      if (status != google.maps.places.PlacesServiceStatus.OK) {
       return;
      }
      resultList.addPlaces(results);
      if (pagination.hasNextPage) {
        resultList.button.onClick = pagination.nextPage;
      }
    });
  </code></pre>
  
  <p>I have problems trying to integret this snippet into the following example, another google map example in Github, gmaps-samples-v3:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Places Search Demo&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css"
            href="https://google-developers.appspot.com/css/screen.css"&gt;
      &lt;link rel="stylesheet"
            href="https://www.google.com/cse/style/look/default.css" type="text/css"&gt;
      &lt;script type="text/javascript"
              src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        var map;
        var places;
        var iw;
        var markers = [];
  
        function initialize() {
          var options = {
            zoom: 12,
            center: new google.maps.LatLng(22.279387,114.164579),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false
          };
          var mapCanvas = document.getElementById('map_canvas');
          map = new google.maps.Map(mapCanvas, options);
          places = new google.maps.places.PlacesService(map);
        }
  
        function updateKeyword(event) {
          updateRankByCheckbox();
          blockEvent(event);
        }
  
        function blockEvent(event) {
          if (event.which == 13) {
            event.cancelBubble = true;
            event.returnValue = false;
          }
        }
  
        function updateRankByCheckbox() {
          var types = getTypes();
          var keyword = document.controls.keyword.value;
          var disabled = !types.length &amp;&amp; !keyword;
          var label = document.getElementById('rankbylabel');
          label.style.color = disabled ? '#cccccc' : '#333';
          document.controls.rankbydistance.disabled = disabled;
        }
  
        function getTypes() {
          var types = []
          for (var i = 0; i &lt; document.controls.type.length; i++) {
            if (document.controls.type[i].checked) {
              types.push(document.controls.type[i].value);
            }
          }
          return types;
        }
  
        function search(event) {
          if (event) {
            event.cancelBubble = true;
            event.returnValue = false;
          }
  
          var search = {};
  
          // Set desired types.
          var types = getTypes();
          if (types.length) {
            search.types = types;
          }
  
          // Set keyword.
          var keyword = document.controls.keyword.value;
          if (keyword) {
            search.keyword = keyword;
          }
  
          // Set ranking.
          if (!document.controls.rankbydistance.disabled &amp;&amp;
              document.controls.rankbydistance.checked) {
            search.rankBy = google.maps.places.RankBy.DISTANCE;
            search.location = map.getCenter();
          } else {
            search.rankBy = google.maps.places.RankBy.PROMINENCE;
            search.bounds = map.getBounds()
          }
  
          // Search.
          places.search(search, function(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
              clearResults();
              clearMarkers();
              for (var i = 0; i &lt; results.length; i++) {
                var letter = String.fromCharCode(65 + i);
                markers[i] = new google.maps.Marker({
                  position: results[i].geometry.location,
                  animation: google.maps.Animation.DROP,
                  icon: 'http://maps.gstatic.com/intl/en_us/mapfiles/marker' +
                      letter + '.png'
                });
                google.maps.event.addListener(
                    markers[i], 'click', getDetails(results[i], i));
                dropMarker(markers[i], i * 100);
                addResult(results[i], i);
              }
            }
          });
        }
  
        function clearMarkers() {
          for (var i = 0; i &lt; markers.length; i++) {
            if (markers[i]) {
              markers[i].setMap(null);
              delete markers[i]
  
            }
          }
        }
  
        function dropMarker(marker, delay) {
          window.setTimeout(function() {
            marker.setMap(map);
          }, delay);
        }
  
        function addResult(result, i) {
          var results = document.getElementById('results');
          var tr = document.createElement('tr');
          tr.style.backgroundColor = i % 2 == 0 ? '#F0F0F0' : '#FFFFFF';
          tr.onclick = function() {
            google.maps.event.trigger(markers[i], 'click');
          };
  
          var iconTd = document.createElement('td');
          var nameTd = document.createElement('td');
          var icon = document.createElement('img');
          icon.src = result.icon;
          icon.className = 'placeIcon';
          var name = document.createTextNode(result.name);
          iconTd.appendChild(icon);
          nameTd.appendChild(name);
          tr.appendChild(iconTd);
          tr.appendChild(nameTd);
          results.appendChild(tr);
        }
  
        function clearResults() {
          var results = document.getElementById('results');
          while (results.childNodes[0]) {
            results.removeChild(results.childNodes[0]);
          }
        }
  
        function getDetails(result, i) {
          return function() {
            places.getDetails({
              reference: result.reference
            }, showInfoWindow(i));
          }
        }
  
        function showInfoWindow(i) {
          return function(place, status) {
            if (iw) {
              iw.close();
              iw = null;
            }
  
            if (status == google.maps.places.PlacesServiceStatus.OK) {
              iw = new google.maps.InfoWindow({
                content: getIWContent(place)
              });
              iw.open(map, markers[i]);
            }
          }
        }
  
        function getIWContent(place) {
          var content = '&lt;table style="border:0"&gt;&lt;tr&gt;&lt;td style="border:0;"&gt;';
          content += '&lt;img class="placeIcon" src="' + place.icon + '"&gt;&lt;/td&gt;';
          content += '&lt;td style="border:0;"&gt;&lt;b&gt;&lt;a href="' + place.url + '"&gt;';
          content += place.name + '&lt;/a&gt;&lt;/b&gt;';
          content += '&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
          return content;
        }
  
        google.maps.event.addDomListener(window, 'load', initialize);
      &lt;/script&gt;
  
      &lt;style type="text/css"&gt;
        html, body {
          margin: 0;
          padding: 0;
          height: 100%;
          font-family: arial;
          font-size: 13px;
          overflow: hidden;
        }
  
        #container {
          margin-top: 6px;
          margin-left: 6px
        }
  
        #map_canvas {
          float: left;
          width: 320px;
          height: 406px;
          margin-top: 13px; 
        }
  
        #listing {
          float: left;
          margin-left: 1px;
          margin-top: 13px;
          width: 200px;
          height: 406px;
          overflow: auto;
          cursor: pointer;
        }
  
        #controls {
          padding: 5px;
        }
        .placeIcon {
          width: 16px;
          height: 16px;
          margin: 2px;
        }
  
        #results {
          border-collapse: collapse;
          width: 184px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body class="docs framebox_body"&gt;
      &lt;div id="container"&gt;
        &lt;div&gt;
          &lt;form name="controls"&gt;
            &lt;div style="margin-top: 5px"&gt;
              Keyword:
            &lt;/div&gt;
            &lt;div style="margin-left: 9px"&gt;
              &lt;input id="keyword" type="text" onkeyup="updateKeyword(event)"
                     onkeydown="blockEvent(event)" style="width:110px"&gt;
            &lt;/div&gt;
            &lt;div style="margin-top: 5px"&gt;
              Types:
            &lt;/div&gt;
            &lt;div style="margin-left: 9px"&gt;
              &lt;input type="checkbox" name="type" value="store"
                     onclick="updateRankByCheckbox()" /&gt; store&lt;br/&gt;
              &lt;input type="checkbox" name="type" value="clothing_store"
                     onclick="updateRankByCheckbox()" /&gt; clothing_store&lt;br/&gt;
              &lt;input type="checkbox" name="type" value="restaurant"
                     onclick="updateRankByCheckbox()" /&gt; restaurant&lt;br&gt;
              &lt;input type="checkbox" name="type" value="lodging"
                     onclick="updateRankByCheckbox()" /&gt; lodging&lt;br&gt;
              &lt;input type="checkbox" name="type" value="subway_station"
                     onclick="updateRankByCheckbox()" /&gt;MTR Station&lt;br&gt;
            &lt;/div&gt;
            &lt;div id="rankbylabel" style="margin-top: 5px; color: #cccccc"&gt;
              &lt;input type="checkbox" disabled="true"
                     name="rankbydistance" /&gt; Rank by distance
            &lt;/div&gt;
            &lt;div style="margin-top: 5px"&gt;
              &lt;input type="submit" value="Search" onclick="search(event)" /&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;div id="map_canvas"&gt;&lt;/div&gt;
      &lt;div id="listing"&gt;
        &lt;table id="results"&gt;&lt;/table&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Could anyone help? Some light(pointers) on the issue would be good enough, please.</p>