皆様、こんにちは！
Google Maps Platform のプロフェッショナル集団、ゴーガです。
Web サイト上で没入感のあるリッチな地図体験を提供できる「Google Maps JavaScript API の 3D Maps」。今年（2026 年）に行われたアップデートにより、表現の幅をさらに広げる様々な機能が追加されました。
観光系はもちろん、不動産や都市開発における景観シミュレーションなど、ビジネスの現場に直結する強力な機能が揃っています。本記事では、ここ数ヶ月で追加された注目の最新アップデートの一部をデモを交えてご紹介します。
本記事のデモコードはすべて JavaScript（Map3DElement や FlattenerElement などのクラス）で実装しています。ですが、実は近年の 3D Maps API は Web Components に対応しており、公式デモのように <gmp-map-3d> や <gmp-flattener> といった HTML タグを記述するだけでも実装可能です。静的な配置であれば HTML、動的なカメラワークや計算処理を行う場合は JavaScript、と用途に合わせて使い分けてみてください。
今回のアップデートで特に注目したいのが、指定したエリアの 3D メッシュを平坦化する FlattenerElement (<gmp-flattener>) です。
この機能を使うと、特定のエリアにある既存の 3D の建物、構造物、樹木などを取り除き、マップを平坦にすることができます。最大のポイントは、地図上の建物を平らにする一方で、丘や谷といったベースとなる「地形の起伏（ジオメトリ）」はそのまま維持される点です。これにより、既存の建物と視覚的に干渉することなく、新しいマンションやリゾート施設などの独自の 3D モデルやマーカーを配置するためのクリアなスペースを作り出すことができ、都市計画や不動産の完成予定シミュレーションに威力を発揮します。
新機能である FlattenerElement（3D メッシュの平坦化）を使って、実際に東京タワーの 3D メッシュ（建物データ）を地図上から非表示にするデモを作成してみました。
実際のコードは非常にシンプルです。
const { Map3DElement, FlattenerElement } = await google.maps.importLibrary('maps3d');
const map = new Map3DElement({
center: { lat: 35.658589, lng: 139.745458, altitude: 180 },
range: 1000,
tilt: 60,
heading: 270,
mode: 'HYBRID',
});
document.querySelector('#map').append(map);
// 東京タワーをすっぽり囲む 4 点のポリゴン
const TOKYO_TOWER_FLATTENER_PATH = [
{ lat: 35.65913546516263, lng: 139.74531231189613 },
{ lat: 35.65848204039046, lng: 139.74476640495695 },
{ lat: 35.658029350626, lng: 139.74557658800333 },
{ lat: 35.65871033121831, lng: 139.74617611478752 },
];
const flattener = new FlattenerElement({ path: TOKYO_TOWER_FLATTENER_PATH });
map.append(flattener);
1. 平坦にしたいエリアのポリゴンを定義
平坦にしたいエリアのポリゴンを定義します。TOKYO_TOWER_FLATTENER_PATH には、東京タワーの敷地を囲む 4 点の緯度・経度をセットします。
2. FlattenerElement をマップに追加
flattenTokyoTower 関数の中で FlattenerElement オブジェクトを生成し、通常の HTML 要素と同じように map.append(flattener) を呼び出すだけです。
今回のデモではシンプルに既存のメッシュを平坦化するデモをご紹介しましたが、この機能の真価は Model3DElement（3D モデル配置）との組み合わせにあります。
FlattenerElement で既存の建物を非表示にし、その空いた敷地に建設予定の新しいビルやマンションの 3D モデル（glTF 形式）を配置することで、不動産の完成予想図（パース）や都市開発の景観シミュレーションを Web ブラウザ上で没入感高く表現することが可能になります！
3D マップ上で特定の場所を強調するマーカー機能も進化しました。これまでの大量描画に最適化された Marker3DElement とは別に、カスタム HTML コンテンツを 3D マップ上に表示できる新しいクラス MarkerElement が追加されました。
※ 非常に多くのマーカーを配置する場合は、パフォーマンスの観点から従来の標準マーカー（Marker3DElement）の使用が推奨されますが、特別なスポットを目立たせたい場合にはこの新クラスが最適です。
MarkerElement を使い、ゴーガが入居する「渋谷363清水ビル」上にカスタムアイコンを表示してみました。
コードは次のようになっています。
（※ベースとなる 3D マップの map オブジェクトは既に作成されている前提とします）
function createGogaMarkerContent() {
const root = document.createElement('div');
root.className = 'goga-marker';
root.innerHTML = `
<div class="goga-marker__card">
<div class="goga-marker__logo-wrap">
<img class="goga-marker__logo" src="images/gogalogo.svg"
alt="株式会社ゴーガ" width="120" height="32" decoding="async">
</div>
<span class="goga-marker__label">株式会社ゴーガ</span>
</div>
<div class="goga-marker__stem" aria-hidden="true"></div>
<div class="goga-marker__dot" aria-hidden="true"></div>
<div class="goga-marker__pulse" aria-hidden="true"></div>
`;
return root;
}
async function showGogaMarker(map) {
const { MarkerElement } = await google.maps.importLibrary('maps3d');
const marker = new MarkerElement({
position: { lat: 35.65788712326757, lng: 139.70519443852, altitude: 0 },
altitudeMode: 'RELATIVE_TO_MESH',
anchorLeft: '-50%',
anchorTop: '-100%',
});
marker.append(createGogaMarkerContent());
map.append(marker);
}
実際のコードは大きく「①マーカーの中身を作る」「②マップに配置する」の 2 ステップで構成されています。
1. マーカーのHTMLを組み立てる (createGogaMarkerContent)
ここでは、マーカーとして表示したいカスタム HTML 要素を JavaScript で構築しています。innerHTML を使って、ロゴや会社名を含むカード部分、地図の座標を正確に指し示すピンの軸、視線を惹きつけるアニメーションなど、複数の要素を組み合わせています。 通常の Web ページを作るのと同じ感覚で、複雑で自由なデザインのコンポーネントをマップ上に配置できるのが、新クラス MarkerElement の最大の魅力です。
（※本デモでは、これらのクラス名に対して CSS でスタイルやアニメーションを当てていますが、CSSコードについては記事のスペースの都合上、本記事では主要な定義のみ掲載しています。）
2. 3D マップにマーカーを配置する (showGogaMarker)
新機能の MarkerElement を生成し、先ほど作った HTML 要素を追加（append）してマップに配置しています。ここで注目したいのが、3D マップならではの細やかな位置調整です。
3D マップの最大の魅力は、自由自在なカメラワークです。今回のアップデートでは、現実のドローン撮影のように、カメラの位置やレンズの画角まで細かく制御できる新しいプロパティ（cameraPosition と fov）が追加され、表現力が向上しました。
3D 空間では以下のパラメータを組み合わせてカメラのアングルを自由に調整することができます。
1. 注視したい位置とカメラ位置をコントロールするパラメータ
2. 角度をコントロールするパラメータ
3. 距離と画角をコントロールするパラメータ
cameraPosition の感覚を掴むために、簡単なデモを作成してみました。
六本木ヒルズ森タワーの屋上にカメラを固定し、カメラの向き（heading）だけを変えて、東京タワーと東京スカイツリーをそれぞれ見渡すデモです。
サンプルコードは次のようになっています。
const { Map3DElement } = await google.maps.importLibrary('maps3d');
const { spherical } = await google.maps.importLibrary('geometry');
const map = new Map3DElement({ mode: 'HYBRID' });
document.body.append(map);
// 六本木ヒルズ森タワー（ビル中心・屋上）
const eye = {
lat: 35.66039544737194,
lng: 139.7292273119707,
altitude: 40, // 屋根メッシュから +40m
};
const tokyoTower = { lat: 35.658589, lng: 139.745458 };
const skytree = { lat: 35.7100626, lng: 139.8107004 };
function lookAt(target) {
map.flyCameraTo({
durationMillis: 0,
endCamera: {
cameraPosition: eye, // 立ち位置は固定
altitudeMode: 'RELATIVE_TO_MESH',
heading: spherical.computeHeading(eye, target), // 向きだけ変える
tilt: 90,
range: 4000,
fov: 28,
},
});
}
// 東京タワーを見る
lookAt(tokyoTower);
// スカイツリーを見る（同じ屋上・heading だけ変更）
// lookAt(skytree);
lookAt と呼ばれる関数を用意しました。この関数が呼び出されると、引数で指定されたターゲットの方角へ flyCameraTo 関数を使ってカメラを向けます。
1. cameraPosition: eye でカメラの位置を固定
eye という変数に「六本木ヒルズ森タワー」の座標をセットします。高度 altitude: 40 に加え、altitudeMode: 'RELATIVE_TO_MESH' を指定するのがポイントです。これによって、地面からではなく「3D 建物の屋根メッシュ」を基準に、+40m 上空へカメラを配置できます。
2. geometry ライブラリで「カメラが向く方角」を自動計算
六本木ヒルズから各ターゲットの方向（heading）を手動での計算が不要となるため、非常に効率的です。geometry ライブラリの spherical.computeHeading(eye, target) を使えば、2 点の座標を指定するだけで正確な方位角（0〜360度）を算出してくれます。
また、レンズ周りのパラメータも調整しています。
今回のデモでも使った flyCameraTo と、flyCameraAround といったカメラアニメーション関数ですが、2026 年 3 月のリリースで altitudeMode を指定できるようになりました。altitudeMode とは、カメラの移動アニメーションにおいて「高度を何基準で計算するのか」を指定することができるパラメータです。指定できる値は次の通りです。
次に、東京スカイツリーを中心点（center）として固定し、fov と range を調整することでどのような見え方になるのかを検証しました。
サンプルコードは次のようになっています。
const { Map3DElement } = await google.maps.importLibrary('maps3d');
const { spherical } = await google.maps.importLibrary('geometry');
const map = new Map3DElement({ mode: 'HYBRID' });
document.body.append(map);
// 注視点：スカイツリー（展望台付近の高度 350m を固定）
const skytree = { lat: 35.7100626, lng: 139.8107004, altitude: 350 };
// カメラを置く方角のヒント（六本木方面から北東を向く）
const fromRoppongi = { lat: 35.66039544737194, lng: 139.7292273119707 };
function setLens(fov, range) {
map.flyCameraTo({
durationMillis: 0,
endCamera: {
center: skytree, // 注視点は固定
altitudeMode: 'RELATIVE_TO_GROUND',
heading: spherical.computeHeading(fromRoppongi, skytree), // 方角も固定
tilt: 65, // 斜め上からの鳥瞰アングルで固定
fov, // 画角：レンズ（小さい＝望遠 / 大きい＝広角）
range, // 距離：カメラと注視点の距離（小さい＝近い / 大きい＝遠い）
},
});
}
// 4 つの比較パターン
setLens(18, 1200); // ① 左上：望遠 × 近距離
// setLens(18, 2500); // ② 右上：望遠 × 遠距離
// setLens(42, 1200); // ③ 左下：広角 × 近距離
// setLens(42, 2500); // ④ 右下：広角 × 遠距離
1. center（注視点）をスカイツリーの高度 350m に固定
今回はカメラ自体の位置（cameraPosition）を指定するのではなく、対象物であるスカイツリーが中心になるように（center）カメラを配置するアプローチをとっています。altitude: 350 と指定することで、スカイツリーの足元ではなく展望台付近の高さにカメラの視点を合わせています。
2. spherical.computeHeading でアングルを決定
六本木方面（fromRoppongi）からスカイツリーを見る方角を geometry ライブラリで自動計算させているため、手動で heading の角度を微調整する手間がありません。
3. fov（画角）と range（距離）の掛け合わせ
center, heading, tilt をすべて固定した状態で、カメラの距離（range）とレンズの画角（fov）だけを変更するだけで、前述の 4 パターンのように「全く印象の異なる地図の表現」を作り出すことができます。
今年（2026 年）の Google Maps JS API 3D Maps でリリースされた、注目の新機能をいくつかご紹介しました。
これらの機能を組み合わせることで、単に「現在地や場所を示す」だけの地図ではなく、都市計画のシミュレーション、不動産の完成予定ビューアー、没入感のある観光案内などを、使い慣れた Web 技術（JavaScript / HTML / CSS）だけで手軽に実現できるようになりました。
ぜひ皆様も、進化し続ける 3D Maps API を活用して、新しい Web マップ体験を作ってみてください！
ゴーガには Google Maps Platform に精通したエンジニアが多く在籍しています。
「そもそも Google Maps Platform って何？」や「不動産や観光サイトへの 3D マップ導入方法」など、気になることがありましたらお気軽にご相談ください！
それでは、また次の記事でお会いしましょう！