This is my first post on Stackoverflow as after hours researching on how to deal with this problem (searching on Stackoverflow itself) I've decided to ask you guys for help.
I'd like to know how to remove the "limit" on markers that this piece of code has. I'm quite new using Google Maps API, so I do apologize in advance if the code looks confusing. 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', 'SS27 3PY', 'CV11 5HF', 'SE23 3SA', 'BN2 5QX', 'ST4 8YL', 'CM3 5SF'];
// 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) {
retu;
}
// 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?key=AIzaSyB2xH6oyymwEND2MK4TaLgll_bSyCABQV4&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.
Thank you in advance !