衝突時動作とマーカーの可視性を制御する

このページでは、高度なマーカーを以下のように制御する方法を解説します。

マーカーの衝突時動作を設定する
マーカーの表示高度を設定する
地図のズームレベルに応じたマーカーの可視性を制御する

マーカーの衝突時動作を設定する

衝突時動作とは、マーカーが別のマーカーと衝突した（表示位置が重なった）際の表示方法のことです。衝突時動作の指定は、ベクター地図専用の機能です。

衝突時動作を指定するには、AdvancedMarkerView.collisionBehavior を次のいずれかに設定します。

REQUIRED（デフォルト）: 他のマーカーとの衝突があっても常に表示されます。
OPTIONAL_AND_HIDES_LOWER_PRIORITY: 他のマーカーと位置が重ならない場合にだけ表示されます。このタイプのマーカー同士が衝突した場合、zIndex の高いほうが表示されます。zIndex も同一の場合、画面内の縦位置が低いほうが表示されます。
REQUIRED_AND_HIDES_OPTIONAL: 他のマーカーとの衝突があっても常に表示されます。さらに、このマーカーと表示位置が重なる OPTIONAL_AND_HIDES_LOWER_PRIORITY のマーカーやラベルはすべて非表示になります。

次の例は、マーカーの衝突時動作の設定方法を示したものです。

TypeScript

const advancedMarker = new google.maps.marker.AdvancedMarkerView({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});index.ts

JavaScript

const advancedMarker = new google.maps.marker.AdvancedMarkerView({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.js

マーカーの表示高度を設定する

ベクター地図では、マーカーが表示される高度を設定できます。この設定は、3D 地図コンテンツに対して適切な位置にマーカーを表示したい場合に役立ちます。マーカーの表示高度を設定するには、MarkerView.position オプションの値として LatLngAltitude を指定します。

TypeScript

const pinView = new google.maps.marker.PinView({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new google.maps.marker.AdvancedMarkerView({
    map,
    content: pinView.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});index.ts

JavaScript

const pinView = new google.maps.marker.PinView({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new google.maps.marker.AdvancedMarkerView({
  map,
  content: pinView.element,
  // Set altitude to 20 meters above the ground.
  position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});index.js

地図のズームレベルに応じたマーカーの可視性を制御する

次の地図は、ズームレベルによってマーカーの可視性が変化するようになっています（まずズームアウトしてみましょう）。

高度なマーカーの可視性を制御するには、zoom_changed リスナーを作成し、条件関数を追加してズームレベルが指定値を超えた場合に AdvancedMarkerView.map を null に設定させます。コードは次のようになります。

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        markerView01.map = zoom > 14 ? map : null;
        markerView02.map = zoom > 15 ? map : null;
        markerView03.map = zoom > 16 ? map : null;
        markerView04.map = zoom > 17 ? map : null;
    }
});index.ts

JavaScript

map.addListener("zoom_changed", () => {
  const zoom = map.getZoom();

  if (zoom) {
    // Only show each marker above a certain zoom level.
    markerView01.map = zoom > 14 ? map : null;
    markerView02.map = zoom > 15 ? map : null;
    markerView03.map = zoom > 16 ? map : null;
    markerView04.map = zoom > 17 ? map : null;
  }
});index.js

次のステップ

マーカーのクリック対応とアクセシビリティ確保