衝突時動作、高度、可視性を制御する

プラットフォームを選択: Android iOS JavaScript

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

  • マーカーが重なった場合の動作を設定する
  • マーカーの表示高度を設定する
  • 地図のズームレベルに応じたマーカーの可視性を制御する

マーカーが重なった場合の動作を設定する

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

重なった場合の動作を指定するには、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 }),
  collisionBehavior: collisionBehavior,
});
mapElement.appendChild(advancedMarker);
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: new google.maps.LatLng({ lat, lng }),
    collisionBehavior: collisionBehavior,
});
mapElement.appendChild(advancedMarker);
index.js

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

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

TypeScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});
marker.append(pin);

mapElement.append(marker);
index.ts

JavaScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});
const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});
marker.append(pin);
mapElement.append(marker);
index.js

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

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

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

TypeScript

mapElement.innerMap.addListener('zoom_changed', () => {
  let zoom = mapElement.innerMap.getZoom();
  for (let i = 0; i < markers.length; i++) {
    const { position, minZoom } = markerOptions[i];
    markers[i].position = zoom! > minZoom ? position : null;
  }
});
index.ts

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    let zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});
index.js

次のステップ

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