on my search page I have a google map with markers for each 'job'. I have made the map default to zoom level 2, where the markers cluster correctly, but as soon as I pass zoom level 5, clustering stops working. I have searched and haven't found any information on this.
Search page map javascript:
<script type="text/javascript">
var mapStyle = [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2e5d4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]}];
var handler = Gmaps.build('Google');
handler.buildMap({
provider: {
styles: mapStyle,
minZoom: 2,
maxZoom: 18,
center: new google.maps.LatLng(20.68177501, -103.3514794)
},
internal: {id: 'map'}},
function(){
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
Jobs controller:
def index
if params[:search].present?
@q = Gig.near(params[:search], 200, :order => 'distance' ).ransack(params[:q])
@gigs = @q.result(distinct: true)
@hash = Gmaps4rails.build_markers(@gigs) do |gig, marker|
marker.lat gig.latitude
marker.lng gig.longitude
marker.title gig.title
end
else
@q = Gig.ransack(params[:q])
@gigs = @q.result(distinct: true)
@hash = Gmaps4rails.build_markers(@gigs) do |gig, marker|
marker.lat gig.latitude
marker.lng gig.longitude
marker.title gig.title
end
end
end
Any insight into this would be great, thanks.
Relevant code lives here.
Here is where you can customize the behavior.
So you can adpat the maxZoom level :
var handler = Gmaps.build('Google', {
markers: {
clusterer: {
maxZoom: 8,
gridSize: 50
}
}
});