I'm making and app witch it's index its a map with a lot of locations and clustering markers is a must. After wandering around I came with a simple and efective solution:
1. Download last version of markerClusterer (I used markerclusterer_compiled.js at http://google-maps-utility-library-v3.g ... terer/src/)
2. Import script int your page:
Code: Select all
<script type="text/javascript" src="./wiklimb/js/markerclusterer_compiled.js" />
Code: Select all
<p:gmap center="#{mainMapController.lat}, #{mainMapController.lng}"
zoom="#{mainMapController.zoom}" type="HYBRID" widgetVar="map"
style="width:80%;height:400px" model="#{mainMapController.markers}"
disableDefaultUI="true" rendered="#{devController.net}">
<p:ajax event="overlaySelect"
listener="#{mainMapController.onMarkerSelect}" />
<p:ajax event="stateChange"
listener="#{mainMapController.onStatusChange}" />
<p:gmapInfoWindow id="infoWindow"> info window stuff
</p:gmapInfoWindow>
</p:gmap>
Code: Select all
<script>
function clusterMarkers(){
var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(PF('map').map, PF('map').map.markers,mcOptions);
PF('map').map.fitBounds = google.maps.Map.prototype.fitBounds;
}
$(window).load(function() {
clusterMarkers();
});
Edit: In my app I have several buttons to filter the map by marker type.
Code: Select all
<p:selectManyButton value="#{mainMapController.filter}" id="typeList">
<f:selectItems value="#{comboController.routeTypeList}"
var="routeType" itemLabel="#{i18nBean.get(routeType.type)}"
itemValue="#{routeType.idroutetype}" />
<p:ajax update="dataPanel" listener="#{mainMapController.filterMap}" oncomplete="clusterMarkers();"></p:ajax>
</p:selectManyButton>