Googleマップでクラスターマーカーの数字を非表示にするにはどうすればよいですか？

Question

だから私は、この持っている：

をしかし、私がしたいことはこれです：

私は、私がここで指定することができますオプションがあるはずかなり確信している：

var options = { 
    gridSize: 80, 
    imagePath: imagePath , 
    someOption : iAmMissing ?? 
} 
var mc = new MarkerClusterer(map, mapmarkers, options); 
google.maps.event.addListener(mc, 'clusteringend', function(){ 
    setTimeout(fixMyPageOnce, 1); 
}); 

しかし、私はオプションを見つけることができないようです。これは正しい場所ですか、それともサークル内の数字を取り除くことができる別の方法ですか？

Answer 1

戻り値の "text"プロパティを ""に設定するカスタムの "calculator"関数を作成します。

calculator: function(markers, numStyles) { 
    var index = 0; 
    var count = markers.length.toString(); 

    var dv = count; 
    while (dv !== 0) { 
    dv = parseInt(dv/10, 10); 
    index++; 
    } 

    index = Math.min(index, numStyles); 
    return { 
    text: "", 
    index: index, 
    title: count 
    }; 
} 

proof of concept fiddle

コードスニペット：

function initialize() { 
 
    var center = new google.maps.LatLng(52.4357808, 4.991315699999973); 
 
    var mapOptions = { 
 
    zoom: 12, 
 
    center: center, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    for (i = 0; i < markers.length; i++) { 
 
    addMarker(markers[i]); 
 
    } 
 
    markerCluster = new MarkerClusterer(map, gmarkers, { 
 
    imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m', 
 
    calculator: function(markers, numStyles) { 
 
     var index = 0; 
 
     var title = ""; 
 
     var count = markers.length.toString(); 
 

 
     var dv = count; 
 
     while (dv !== 0) { 
 
     dv = parseInt(dv/10, 10); 
 
     index++; 
 
     } 
 

 
     index = Math.min(index, numStyles); 
 
     return { 
 
     text: "", 
 
     index: index, 
 
     title: count 
 
     }; 
 
    } 
 
    }); 
 
} 
 
var gmarkers = []; 
 
var markers = []; 
 
var infowindow = new google.maps.InfoWindow({ 
 
    content: '' 
 
}); 
 
var markerCluster; 
 

 
// Our markers 
 
markers = [ 
 
    ['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'], 
 
    ['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'], 
 
    ['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'], 
 
    ['3', 'Title 4', 52.4555687, 5.029231599999994, 'second'] 
 
]; 
 

 
function addMarker(marker) { 
 
    var title = marker[1]; 
 
    var pos = new google.maps.LatLng(marker[2], marker[3]); 
 
    var content = marker[1]; 
 

 
    var marker = new google.maps.Marker({ 
 
    title: title, 
 
    position: pos, 
 
    map: map 
 
    }); 
 

 
    gmarkers.push(marker); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker1, content) { 
 
    return function() { 
 
     infowindow.setContent(content); 
 
     infowindow.open(map, marker); 
 
    } 
 
    })(marker, content)); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map-canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script> 
 
<div id="map-canvas"></div>

Answer 2

ますC単に "スタイル"オプションを使用し、 "textSize"オプションを0よりわずかに上に設定してください：

var options = { 
     gridSize: 80, 
     styles: [{ 
       url: imagePath, 
       height: 29, 
       width: 29, 
       anchor: [0, 0], 
       textSize: 0.001 
       }, { 
       url: imagePath, 
       height: 49, 
       width: 49, 
       anchor: [0, 0], 
       textSize: 0.001 
       }, { 
       url: imagePath, 
       width: 65, 
       height: 65, 
       anchor: [0, 0], 
       textSize: 0.001 
       }] 
    } 

私のために働いています。