このページでは、高度なマーカーを以下のように制御する方法を解説します。
- マーカーが重なった場合の動作を設定する
- マーカーの表示高度を設定する
- 地図のズームレベルに応じたマーカーの可視性を制御する
マーカーが重なった場合の動作を設定する
重なった場合の動作とは、マーカーが別のマーカーと衝突した（表示位置が重なった）際の表示方法のことです。重なった場合の動作の指定は、ベクターマップ専用の機能です。
重なった場合の動作を指定するには、AdvancedMarkerElement.collisionBehavior を次のいずれかに設定します。
REQUIRED（デフォルト）: 他のマーカーと重なっていても常に表示されます。OPTIONAL_AND_HIDES_LOWER_PRIORITY: 他のマーカーと位置が重ならない場合にだけ表示されます。このタイプのマーカー同士が重なった場合、zIndexの高いほうが表示されます。zIndexも同一の場合、画面内の縦位置が低いほうが表示されます。REQUIRED_AND_HIDES_OPTIONAL: 他のマーカーと重なっても常に表示されます。さらに、このマーカーと表示位置が重なるOPTIONAL_AND_HIDES_LOWER_PRIORITYのマーカーやラベルはすべて非表示になります。
次の例は、マーカーが重なった場合の動作の設定方法を示したものです。
TypeScript
const advancedMarker = new AdvancedMarkerElement({
position: new google.maps.LatLng({ lat, lng }),
map,
collisionBehavior: collisionBehavior,
});
JavaScript
const advancedMarker = new AdvancedMarkerElement({
position: new google.maps.LatLng({ lat, lng }),
map,
collisionBehavior: collisionBehavior,
});
マーカーの表示高度を設定する
ベクターマップでは、マーカーが表示される高度を設定できます。この設定は、3D 地図コンテンツに対して適切な位置にマーカーを表示したい場合に役立ちます。マーカーの表示高度を設定するには、MarkerView.position オプションの値として LatLngAltitude を指定します。
TypeScript
const pin = new PinElement({
background: '#4b2e83',
borderColor: '#b7a57a',
glyphColor: '#b7a57a',
scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
map,
content: pin.element,
// Set altitude to 20 meters above the ground.
position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});
JavaScript
const pin = new PinElement({
background: "#4b2e83",
borderColor: "#b7a57a",
glyphColor: "#b7a57a",
scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
map,
content: pin.element,
// Set altitude to 20 meters above the ground.
position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});
地図のズームレベルに応じたマーカーの可視性を制御する
次の地図は、ズームレベルによってマーカーの可視性が変化するようになっています（試しにズームアウトしてみてください）。
高度なマーカーの可視性を制御するには、zoom_changed リスナーを作成し、ズームレベルが指定値を超えた場合に AdvancedMarkerElement.map を null に設定する条件関数を追加します。コードは次のようになります。
TypeScript
map.addListener('zoom_changed', () => {
const zoom = map.getZoom();
if (zoom) {
// Only show each marker above a certain zoom level.
marker01.map = zoom > 14 ? map : null;
marker02.map = zoom > 15 ? map : null;
marker03.map = zoom > 16 ? map : null;
marker04.map = zoom > 17 ? map : null;
}
});
JavaScript
map.addListener("zoom_changed", () => {
const zoom = map.getZoom();
if (zoom) {
// Only show each marker above a certain zoom level.
marker01.map = zoom > 14 ? map : null;
marker02.map = zoom > 15 ? map : null;
marker03.map = zoom > 16 ? map : null;
marker04.map = zoom > 17 ? map : null;
}
});