Bei zu vielen Markern in einer Karte wird es schnell unübersichtlich und es ist kaum zu erkennen wie viele Marker in einer bestimmten Region gesetzt sind.
In manchen Anwendungsfällen ist es aber fördernd die Anzahl der Marker zu kennen. Daher bietet die Google Maps API mit der MarkerClustter Erweiterung Abhilfe.
Ausgehend von einer Map mit drei Markern und dem Bounce aus dem Letzten Post kann dies einfach nachgepflegt werden.
Die Ausgangslage:
<div class=”gmap” id=”google_map”></div>
<script type=”text/javascript” src=”https://maps.google.com/maps/api/js?sensor=false&language=de”></script>
<script type=“text/javascript“>/* zu erst werden die Optionen im JSON Format definiert */
var myOptions = {
zoom: 12, // Zoom Stufe der Karte
mapTypeId: google.maps.MapTypeId.ROADMAP // Ausgabeart der Karte ( Staßenkarte / Sattelitenkarte / Terrain Karte / Hybrid )
};/* anschließend wird das Eigentlich Karten Objekt erstellt*/
var myMap = new google.maps.Map(
document.getElementById(„google_map“), // Die ID des HTML DIV in dem die Karte gezeigt werden soll.
myOptions // die oben definierten Optionen. Diese könneten auch direkt hier übergeben werde.
);/* Ein Bounce Objeket erstellen */
var Bounds = new google.maps.LatLngBounds(); // das Objekt zur verwaltung der Marker Positionen// Die Position für New York wäre die folgende
var latlong = new google.maps.LatLng(40.7143528,-74.0059731);/* dem Bounce die Position des ersten Markers übergeben */
Bounds.extend(latlong);/* neuen Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});// Die Position für den zweiten Marker erstellen
var latlong = new google.maps.LatLng(39.7143528,-75.0059731);/* dem Bounce die Position des zweiten Markers übergeben */
Bounds.extend(latlong);/* Einen weiterern Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});// Die Position für den zweiten Marker erstellen
var latlong = new google.maps.LatLng(41.7143528,-73.0059731);/* dem Bounce die Position des dritten Markers übergeben */
Bounds.extend(latlong);/* Einen weiterern Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});/* nun muss die Karte auf das Richtige Zoom Level gesetzt werden um alle Punkte sehen zu können. */
var zoomLevel = myMap.fitBounds(Bounds);/* jetzt wird das Zentrum des Bounce Objektes benötigt. */
var mapCenter = Bounce.getCenter();/* nun muss noch das Zentrum der Karte auf die Position gesetzt werden */
myMap.setCenter(mapCenter, zoomLevel);
</script>
Um mit dem MarkerCluster zu arbeiten muss dieser in die Webseite eingebunden werden. Dies können wir über googlecode.com realisieren.
Hierzu wird nach der Google Map Api einbindung noch folgender Tag hinzugefügt.
<script type=“text/javascript“ src=“http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js“></script>
Dieser bindet nun die MarkerCluster Erweiterung in die Webseite ein.
Im nächsten Schritt muss dem Cluster mitgeteilt werden welche Marker es Gibt, hierzu merkt man sich die erstellten Marker in einem Array was dann dem MarkerCluster übergeben wird.
<script type=“text/javascript“>
// das Array für Marker definieren
var MarkerArray = [];// Die Position für New York wäre die folgende
var latlong = new google.maps.LatLng(40.7143528,-74.0059731);/* dem Bounce die Position des ersten Markers übergeben */
Bounds.extend(latlong);/* neuen Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});/* DEM Cluster Array den Marker übergeben. */
MarkerArray.push(Marker);/* Cluster Optionen */
var mcOptions = {
gridSize: 50,
maxZoom: 14, // definiert die Maximale Stufe in die gezoomt wird
}/* Cluser erstellen */
var Cluste = new MarkerClusterer(
myMap, // Karte definieren
MarkerArray, // Marker Array übergeben
mcOptions // Cluster Optionen
);
</script>
Mit dieser Änderung Cluster Google Map nun die Marker und zeigt die Anzahl der Marker an.
Das Vollständiges Script
<div class=”gmap” id=”google_map”></div>
<script type=”text/javascript” src=”https://maps.google.com/maps/api/js?sensor=false&language=de”></script>
<script type=“text/javascript“>// das Array für Marker definieren
var MarkerArray = [];/* zu erst werden die Optionen im JSON Format definiert */
var myOptions = {
zoom: 12, // Zoom Stufe der Karte
mapTypeId: google.maps.MapTypeId.ROADMAP // Ausgabeart der Karte ( Staßenkarte / Sattelitenkarte / Terrain Karte / Hybrid )
};/* anschließend wird das Eigentlich Karten Objekt erstellt*/
var myMap = new google.maps.Map(
document.getElementById(„google_map“), // Die ID des HTML DIV in dem die Karte gezeigt werden soll.
myOptions // die oben definierten Optionen. Diese könneten auch direkt hier übergeben werde.
);/* Ein Bounce Objeket erstellen */
var Bounds = new google.maps.LatLngBounds(); // das Objekt zur Verwaltung der Marker Positionen// Die Position für New York wäre die folgende
var latlong = new google.maps.LatLng(40.7143528,-74.0059731);/* dem Bounce die Position des ersten Markers übergeben */
Bounds.extend(latlong);/* neuen Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});/* DEM Cluster Array den Marker übergeben. */
MarkerArray.push(Marker);// Die Position für den zweiten Marker erstellen
var latlong = new google.maps.LatLng(39.7143528,-75.0059731);/* dem Bounce die Position des zweiten Markers übergeben */
Bounds.extend(latlong);/* Einen weiterern Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});/* DEM Cluster Array den Marker übergeben. */
MarkerArray.push(Marker);// Die Position für den zweiten Marker erstellen
var latlong = new google.maps.LatLng(41.7143528,-73.0059731);/* dem Bounce die Position des dritten Markers übergeben */
Bounds.extend(latlong);/* Einen weiterern Marker erstellen */
var Marker = new google.maps.Marker({
position: latlong, // Position des Markers ( hier New York das Zentrum der Karte )
map: myMap // die Karte zuweisen
});/* DEM Cluster Array den Marker übergeben. */
MarkerArray.push(Marker);/* Cluster Optionen */
var mcOptions = {
gridSize: 50,
maxZoom: 14, // definiert die Maximale Stufe in die gezoomt wird
}/* Cluser erstellen */
var Cluste = new MarkerClusterer(
myMap, // Karte definieren
MarkerArray, // Marker Array übergeben
mcOptions // Cluster Optionen
);/* nun muss die Karte auf das Richtige Zoom Level gesetzt werden um alle Punkte sehen zu können. */
var zoomLevel = myMap.fitBounds(Bounds);/* jetzt wird das Zentrum des Bounce Objektes benötigt. */
var mapCenter = Bounce.getCenter();/* nun muss noch das Zentrum der Karte auf die Position gesetzt werden */
myMap.setCenter(mapCenter, zoomLevel);
</script>
Natürlich können alle Marker Icons und Cluster Icons selbst über die Style und Icon Parameter der Api konfiguriert werden.
Hierzu mehr in der Google Map API Dokumentation und der MarkerCluster Dokumentation.
Manuel Müller 