3D 地図にマーカーを追加する

各マーカーを使って地図上に場所を表示します。プログラマティックに追加する方法と HTML を使用して追加する方法を説明します。

HTML を使用してマーカーを追加する

HTML を使用して 3D マーカーを追加するには、gmp-marker-3d 子要素を gmp-map-3d 要素に追加します。ウェブページにマーカーを追加するスニペットは次のとおりです。

<gmp-map-3d
  mode="hybrid"
  center="48.861000,2.335861"
  heading="110"
  tilt="67.5"
  range="1000"
  style="height:400px"
  >
    <gmp-marker-3d
      position="48.861000,2.335861">
    </gmp-marker-3d>
</gmp-map-3d>

プログラマティックにマーカーを追加する

プログラマティックに 3D マーカーを地図に追加するには、次の例に示すように、新しい Marker3DElement を作成し、lat/lng 座標と基本地図への参照を渡します。

const marker = new Marker3DElement({
  position: {lat: 47.6093, lng: -122.3402}, // (Required) Marker must have a lat/lng.
  altitudeMode : "ABSOLUTE", // (Optional) Treated as CLAMP_TO_GROUND if omitted.
  extruded : true, // (Optional) Draws line from ground to the bottom of the marker.
  label : "Basic Marker" // (Optional) Add a label to the marker.
});

map.append(marker); // The marker must be appended to the map.

次のステップ

• マーカーの基本的なカスタマイズ