Create Google map With pagination and Particular Place Type

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Places Searchbox</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
     
        #map {
            height: 100%;
        }
     
        .controls {
            margin-top: 10px;
            border: 1px solid transparent;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 32px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }
     
        #pac-input {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            margin-left: 12px;
            padding: 0 11px 0 13px;
            text-overflow: ellipsis;
            width: 300px;
        }
     
        #pac-input:focus {
            border-color: #4d90fe;
        }
     
        .pac-container {
            font-family: Roboto;
        }
     
        #type-selector {
            color: #fff;
            background-color: #4d90fe;
            padding: 5px 11px 0px 11px;
        }
     
        #type-selector label {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
        }
     
        #target {
            width: 345px;
        }
    </style>

</head>


<body>
    <div id="map"></div>
       <input type="button" id="more" value="more">
    <script>
        var map;
        var markers = [];

        function initMap() {
            var pyrmont = {
                lat: 54.801440,
                lng: -2.555612
            };

            map = new google.maps.Map(document.getElementById('map'), {
                center: pyrmont,
                zoom: 8,
             
            });

            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch({
                location: pyrmont,
                radius: 999999,
                type: ['bar']
            }, processResults);

        }



        function processResults(results, status, pagination) {
            if (status !== google.maps.places.PlacesServiceStatus.OK) {
                return;
            } else {
         
                console.log(results);
                mappage(pagination);
           
                for (var i = 0; i < results.length; i++) {

                    createMarkers(results[i]);
                }
            }

            function mappage(pagination) {
                if (pagination.hasNextPage) {
                    pagination.nextPage();
                 
                }
            }

         
            var infoWindow = new google.maps.InfoWindow();

            function createMarkers(place) {

                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,
                    address: place.vicinity
                });
                marker.content = '<div onclick="ShowInfoWindow()" class="infoWindowContent"><h6>' + marker.title + '</h6> <p>' + marker.address + '</p></div>';

                google.maps.event.addListener(marker, 'click', function () {
                    var json_data = {
                        'Bar_Name': marker.title,
                        'Bar_Address': marker.address,
                        'Bar_Position': marker.position
                    }
                    localStorage.setItem("Title", JSON.stringify(json_data));
                    infoWindow.setContent(marker.content);
                    infoWindow.open(map, marker);

                });
                       
                markers.push(marker);

            }

            function setMapOnAll(map) {
                for (var i = 0; i < markers.length; i++) {
                    markers[i].setMap(map);

                }
            }

            function showMarkers() {
                setMapOnAll(map);
            }

        }
        function ShowInfoWindow() {
         
            console.log(localStorage.getItem("Title"));
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&types=bar&key=AIzaSyA8QR7tvuRAV6SkXwLlBsQbAxBAnhuzxMA&callback=initMap" async defer></script>
</body>

</html>