Adding marker clusterer to google maps with for-loop?

0
votes

For this map of Germany I present newspaper kiosks who choosed to boycott a hate sheet. The minimised map with 14 entries works fine so far. But there are some regions, which have more than one store and google maps seems to show only one marker:

enter image description here

I know actually there are more and if you zoom these positions, the other markers appear. But a clustering would be better, which shows the number of markers, if there are more around this marker. I've found this at GitHub: Marker Clusterer, but even with the simple example I don't know how to add this library to my map. Maybe I'm a bit confused with the for-loop, to show up the markers.

The source of my map is basically this one:

<html><head>
<style type="text/css">
      html { height: 100% } body { height: 100%; margin: 0; padding: 0; } a { text-decoration:none; color:#000; } #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=ACCESSTOKEN&sensor=false">
    </script>
    <script type="text/javascript">
	
	var Orte = [	
	[51.418288,7.339213,"EDEKA Schwalemeyer, Bommerfelder Ring 110, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],
	[51.418266,7.342316,"Bonema Trinkhalle & Minishop, Bommerfelder Ring 86, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],	
	[51.422492,7.338546,"Kiosk, Auf dem Brenschen 21, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],
	[51.415127,7.337124,"Holzofenbäckerei, Elberfelder Straße 11, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"]
	];
	
	function initialize()
		{ 
		var map = new google.maps.Map(document.getElementById('map_canvas'));
		map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(legende);		
		var bounds = new google.maps.LatLngBounds();
		var infowindow = new google.maps.InfoWindow();
		var image = {url:"bildfrei.png",size:new google.maps.Size(32,32),};
		
		for (var i in Orte)
			{
				var p = Orte[i];
				var latlng = new google.maps.LatLng(p[0],p[1]);bounds.extend(latlng);         
				var marker = new google.maps.Marker({position:latlng,map:map,title:p[2],icon:image});     
				google.maps.event.addListener(marker, 'click', function() {infowindow.setContent(this.title);infowindow.open(map, this);});
			}		 
		map.fitBounds(bounds);
		}
 
		google.maps.event.addDomListener(window, 'load', initialize); 	 
	 
    </script>    
</head>  
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>    
  </body>
</html>

I already tried to add the markerclusterer_compiled.js and var markerCluster = new MarkerClusterer(map, markers); and the markerCluster below var map = new google.maps.Map(document.getElementById('map_canvas')); ...but no success.

May somebody help me out? :-)

UPDATE: The version with the js-library clusterer:

    <html><head>
    <style type="text/css">
          html { height: 100% } body { height: 100%; margin: 0; padding: 0; } a { text-decoration:none; color:#000; } #map-container { padding: 6px; border-width: 1px; border-style: solid;border-color: #ccc #ccc #999 #ccc;-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px; box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;  width: 600px; } #map_canvas { height: 100% }
        </style>
        <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=ACCESSTOKEN&sensor=false">
<script>
      var script = '<script type="text/javascript" src="markerclusterer';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '_compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>
        </script>
        <script type="text/javascript">
    	
    	var Orte = [	
    	[51.418288,7.339213,"EDEKA Schwalemeyer, Bommerfelder Ring 110, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],
    	[51.418266,7.342316,"Bonema Trinkhalle & Minishop, Bommerfelder Ring 86, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],	
    	[51.422492,7.338546,"Kiosk, Auf dem Brenschen 21, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],
    	[51.415127,7.337124,"Holzofenbäckerei, Elberfelder Straße 11, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"]
    	];
    	
    	function initialize()
    		{ 
    		var map = new google.maps.Map(document.getElementById('map_canvas'));
    		var markerCluster = new MarkerClusterer(map, marker);    
    		map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(legende);		
    		var bounds = new google.maps.LatLngBounds();
    		var infowindow = new google.maps.InfoWindow();
    		var image = {url:"bildfrei.png",size:new google.maps.Size(32,32),};
    		
    		for (var i in Orte)
    			{
    				var p = Orte[i];
    				var latlng = new google.maps.LatLng(p[0],p[1]);bounds.extend(latlng);         
    				var marker = new google.maps.Marker({position:latlng,map:map,title:p[2],icon:image});     
    				google.maps.event.addListener(marker, 'click', function() {infowindow.setContent(this.title);infowindow.open(map, this);});
    			}		 
    		map.fitBounds(bounds);
    		}
     
    		google.maps.event.addDomListener(window, 'load', initialize); 	 
    	 
        </script>    
    </head>  
    <body onload="initialize()">
    <div id="map-container">
    <div id="map_canvas" style="width:100%; height:100%"></div>    
    </div>  
      </body>
    </html>
1
google-mapsjavascriptmarkerclusterer
What does the code look like where you tried to add the markerclusterer? Have you looked at any of the similar questions on SO? – geocodezip
@geocodezip I updated the post above. – Sebastian
I get a javascript error with the posted code: Uncaught ReferenceError: legende is not defined – geocodezip

1 Answers

2
votes

Your markers aren't being clustered because you never add them to the MarkerClusterer. One way of fixing it is to add them as you create them:

for (var i in Orte) {
    var p = Orte[i];
    var latlng = new google.maps.LatLng(p[0], p[1]);
    bounds.extend(latlng);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: p[2],
        icon: image
    });
    markerCluster.addMarker(marker);
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(this.title);
        infowindow.open(map, this);
    });
}

working fiddle

code snippet:

var Orte = [
  [51.418288, 7.339213, "EDEKA Schwalemeyer, Bommerfelder Ring 110, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],
  [51.418266, 7.342316, "Bonema Trinkhalle & Minishop, Bommerfelder Ring 86, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],
  [51.422492, 7.338546, "Kiosk, Auf dem Brenschen 21, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],
  [51.415127, 7.337124, "Holzofenbäckerei, Elberfelder Straße 11, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"]
];

function initialize() {
  var map = new google.maps.Map(document.getElementById('map_canvas'));
  var markerCluster = new MarkerClusterer(map, marker);
  // map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(legende);
  var bounds = new google.maps.LatLngBounds();
  var infowindow = new google.maps.InfoWindow();
  var image = {
    url: "bildfrei.png",
    size: new google.maps.Size(32, 32),
  };

  for (var i in Orte) {
    var p = Orte[i];
    var latlng = new google.maps.LatLng(p[0], p[1]);
    bounds.extend(latlng);
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title: p[2]
        /*,
                    icon: image */
    });
    markerCluster.addMarker(marker);
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(this.title);
      infowindow.open(map, this);
    });
  }
  map.fitBounds(bounds);
  google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    var newZoom = map.getZoom() - 2;
    map.setZoom(newZoom);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
html {
  height: 100%
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #000;
}
#map-container {
  padding: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #ccc #999 #ccc;
  -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
  width: 600px;
  height: 100%;
}
#map_canvas {
  height: 100%
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div id="map-container">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</div>