I am trying to get more than 10 markers drawn using google maps V3 but it stops at 10. I am not geo coding the markers, I already have the lat/long. Does anyone know why I would be having this issue? Below is the code I am using, it is nothing crazy.
var map = null;
var infowindow = null;
$(document).ready(function () {
var venueLatLng = new google.maps.LatLng($('#hdnVenueLat').val(), $('#hdnVenueLng').val());
var options = {
center: venueLatLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
var marker = new google.maps.Marker({
position: venueLatLng,
map: map,
title: $("#hdnVenueName").val()
});
drawPoints();
infowindow = new google.maps.InfoWindow();
$('.listing').click(function () {
drawInfoWindow(markers[$(this).data('id')])
})
})
function drawPoints() {
var center = new google.maps.LatLng($('#hdnVenueLat').val(), $('#hdnVenueLng').val());
var bounds = new google.maps.LatLngBounds();
$('.listing').each(function (index) {
var lat = $(this).data('lat').toString();
var lng = $(this).data('lng').toString();
var latLng = new google.maps.LatLng(lat, lng);
var id = $(this).data('id').toString();
var marker = new google.maps.Marker(
{
id: id,
position: latLng,
icon: new google.maps.MarkerImage('/images/map-sprites.png', new google.maps.Size(26, 33), getImagePos(index)),
//shadow: new google.maps.MarkerImage('/images/map-sprites.png', new google.maps.Size(36, 24), new google.maps.Point(35, 345), new google.maps.Point(4, 15)),
map: map,
title: $(this).data('name')
}
);
google.maps.event.addListener(marker, 'click', function () {
drawInfoWindow(marker);
});
markers[id] = marker;
bounds.extend(new google.maps.LatLng(lat, lng));
})
map.fitBounds(bounds);
}