クラスタをクリックすると、そのクラスタに属するマーカが全て表示されます。
縮尺レベルを変更するとクラスタを再計算し地図上に表示します。
複数のマーカをクラスタとして表示するにはZDC.MarkerClusterクラスを利用します。
<!DOCTYPE html> <html> <head> <meta charset="EUC-JP"> <script src="http://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,userwidget.js&enc=EUC&force=1" type="text/javascript"></script> <!-- 取得したmarkercluster.jsを別途インクルードする --> <script type="text/javascript" src="markercluster-1.0.js"></script> <script type="text/javascript"> //<![CDATA[ function loadMap() { var map = new ZDC.Map( document.getElementById('ZMap'), {zoom: 1} ); var points = [35.6993834,139.8420817,35.5937677,139.8022117,35.7451715,139.9249235, 35.6228699,139.9333972,35.6188277,139.9505359,35.6426869,139.5442987, 35.7152940,139.8396549,35.6731445,139.9797448,35.6092503,139.7884051, 35.6945432,139.9922836,35.7164108,139.5491312,35.7470273,139.9701101, 35.6792393,139.5693625,35.5935533,139.9676310,35.7201691,139.6554320 ]; var markers = makeMarkers(points); /* マーカクラスタを作成する */ new ZDC.MarkerCluster(map, {markers: markers}); }; function makeMarkers(points) { var markers = []; for (var i = 0, j = points.length-1; i < j - 1; i+=2) { markers.push(new ZDC.Marker(new ZDC.LatLon(points[i], points[i + 1]))); } return markers; }; //]]> </script> </head> <body onload="loadMap();"> <div id="ZMap" style="border:1px solid #777777; width:650px; height:300px; top:0px; left:20px; position:absolute;"></div> </body> </html>