Q:

Remove limit on markers using Google Maps API Javascript

I'd like to know how to remove the "limit" on markers that this piece of code has. I'm using the Geocode feature + Autocomplete feature from Google Maps API.
<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>

    <body>
    <div id="page-wrapper" class="google-map" style="padding:0;">
        <div class="col-xs-12 col-sm-6 google-map" style="padding:0;">
            <ul class="list-group">
                <li class="list-group-item">
                    <h4>Item header</h4>
                    <address>
                        Address line 1<br>
                        Address line 2<br>
                        City<br>
                        Post Code                   
                    </address>
                </li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 google-map" style="padding:0;">
            <input id="pac-input" class="form-control controls" type="text" placeholder="Search Box">
            <div id="map"></div>
        </div>
    </div>

    </body>
    <script>
    function initAutocomplete() {
            var bounds = new google.maps.LatLngBounds();
            var myOptions = {
                    mapTypeId: 'roadmap'
            };
            var addresses = ['WF1 1DE', 'SE6 4XN', 'SW15 5DD', 'CV10 7AL', 'BN10 7JG', 'BS14 8PZ', 'BN1 3DA', 'CV11 5HF', 'SE23 3SA', 'BN2 5QX', 'ST4 8YL', 'CM3 5SF', 'SP4 9JZ'];
        // Info Window Content
        var infoWindowContent = ['<div class="info_content"><h4>Item header</h4><p>Address line 1<br>Address line 2<br>City</p></div>'];
            geocoder = new google.maps.Geocoder();
            map = new google.maps.Map(document.getElementById("map"), myOptions);
            // Create the search box and link it to the UI element.
            var input = document.getElementById('pac-input');
            var searchBox = new google.maps.places.SearchBox(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            // Bias the SearchBox results towards current map's viewport.
            map.addListener('bounds_changed', function() {
                searchBox.setBounds(map.getBounds());
            });

            var markers = [];

            searchBox.addListener('places_changed', function() {
                var places = searchBox.getPlaces();

                if (places.length == 0) {
                    return;
                }

                // Clear out the old markers.
                markers.forEach(function(marker) {
                    marker.setMap(null);
                });
                markers = [];

                // For each place, get the icon, name and location.
                var bounds = new google.maps.LatLngBounds();
                places.forEach(function(place) {
                    // Create a marker for each place.
                    markers.push(new google.maps.Marker({
                        map: map,
                        title: place.name,
                        position: place.geometry.location
                    }));

                    if (place.geometry.viewport) {
                        // Only geocodes have viewport.
                        bounds.union(place.geometry.viewport);
                    } else {
                        bounds.extend(place.geometry.location);
                    }
                });
                map.fitBounds(bounds);
            });

            if (geocoder) {

                    // Display multiple markers on a map
                    var infoWindow = new google.maps.InfoWindow();
                    var counter = 0;

                    for (var x = 0; x < addresses.length; x++) {

                            geocoder.geocode({
                                    'address': addresses[x]
                            }, function (results, status) {
                                    if (status == google.maps.GeocoderStatus.OK) {
                                            if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

                                                    var iwContent = infoWindowContent[counter];

                                                    var marker = new google.maps.Marker({
                                                            position: results[0].geometry.location,
                                                            map: map,
                                                            title: addresses[counter]
                                                    });

                                                    google.maps.event.addListener(marker, 'click', function () {

                                                            infoWindow.setContent(iwContent);
                                                            infoWindow.open(map, marker);
                                                    });

                                                    counter++;

                                                    // Automatically center the map fitting all markers on the screen
                                                    bounds.extend(results[0].geometry.location);
                                                    map.fitBounds(bounds);
                                            }
                                    }
                            });
                    }
            }
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&callback=initAutocomplete" async defer></script>

I do believe that the answer lies somewhere around :
    for (var x = 0; x < addresses.length; x++) {

            geocoder.geocode({
                    'address': addresses[x]
            }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                            if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

                                    var iwContent = infoWindowContent[counter];

                                    var marker = new google.maps.Marker({
                                            position: results[0].geometry.location,
                                            map: map,
                                            title: addresses[counter]
                                    });

                                    google.maps.event.addListener(marker, 'click', function () {

                                            infoWindow.setContent(iwContent);
                                            infoWindow.open(map, marker);
                                    });

                                    counter++;

                                    // Automatically center the map fitting all markers on the screen
                                    bounds.extend(results[0].geometry.location);
                                    map.fitBounds(bounds);
                            }
                    }
            });
    }

At this point it only displays 11 markers for some reason. I need for it to be able to show as many as I need as I'll be getting data from a database.

A:

The geocoder is subject to a quota and a rate limit.  Check the status returned by the service when it isn't OK. You will find it is OVER_QUERY_LIMIT.
There are several solutions to handling status OVER_QUERY_LIMIT from the service.  A couple of options:

OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down?
Multiple markers Google Map API v3 from array of addresses and avoid OVER_QUERY_LIMIT while geocoding on pageLoad

