const pos1 = {lat: -33.727111, lng: 150.371124}; const marker1 = new google.maps.Marker({position: pos1, map: map}); const pos2 = {lat: -33.718234, lng: 150.363181}; const marker2 = new google.maps.Marker({position: pos2, map: map});
const pos1 = {lat: -33.727111, lng: 150.371124};
const marker1 = new google.maps.Marker({position: pos1, map: map});
const pos2 = {lat: -33.718234, lng: 150.363181};
const marker2 = new google.maps.Marker({position: pos2, map: map});
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
// すべてのマーカーの配列を作る const markers = [marker1, marker2]; // 追加するクラスターアイコンへのパスを定義する (1.png, 2.png, ...) const imagePath = "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"; // マップとマーカーに対してクラスター化を有効にする const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath});
// すべてのマーカーの配列を作る
const markers = [marker1, marker2];
// 追加するクラスターアイコンへのパスを定義する (1.png, 2.png, ...)
const imagePath = "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m";
// マップとマーカーに対してクラスター化を有効にする
const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath});
imagePath
.png
imageExtension
gridSize
zoomOnClick
maxZoom
styles
// オプションの定義 const clusterOptions = { imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m", gridSize: 30, zoomOnClick: false, maxZoom: 10, }; // マーカーを管理する Marker Clusterer を追加する const markerClusterer = new MarkerClusterer(map, markers, clusterOptions); // クラスターが生成されたあとにスタイルを変更する const styles = markerClusterer.getStyles(); for (let i=0; i<styles.length; i++) { styles[i].textColor = "red"; styles[i].textSize = 18; }
// オプションの定義
const clusterOptions = {
imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
gridSize: 30,
zoomOnClick: false,
maxZoom: 10,
};
// マーカーを管理する Marker Clusterer を追加する
const markerClusterer = new MarkerClusterer(map, markers, clusterOptions);
// クラスターが生成されたあとにスタイルを変更する
const styles = markerClusterer.getStyles();
for (let i=0; i<styles.length; i++) {
styles[i].textColor = "red";
styles[i].textSize = 18;
}
