Googleの3D地図は迫力があります。しかし、航空写真ベースだと道路や店名が読みにくいと感じた方も多いでしょう。そこで注目したいのが、2026年10月8日のMaps JavaScript API更新です。3D地図に「道路地図モード」が追加されました。この記事では、東京駅周辺で試した画面とともに要点を解説します。
3D地図に「道路地図モード」が登場
結論から言うと、3D地図で道路地図と航空写真を切り替えられるようになりました。これまでの3D地図は、航空写真から作るリアルな立体表示が基本でした。今回の更新で、見慣れた道路地図のデザインも選べます。しかも、立体的な視点はそのままです。
選べる3つのマップモード
公式ドキュメントでは、次の3つのモードが案内されています。
- ROADMAP：ラベル付きの道路地図
- SATELLITE：航空写真ベースの3D地図
- HYBRID：航空写真に地名を重ねた表示
また、モードを切り替えるボタンも用意されました。さらに、ダークモード用のcolorSchemeも加わっています。3D地図に文字を置けるLabel3DElementも同時に追加されました。
東京駅周辺で試してみた
では、日本ではどう見えるのでしょうか。公式サンプルの表示位置を東京駅に変えて、各モードを比べました。
出典：Google
ROADMAPでは、ビルが白い立体で表示されました。そのうえ、駅名や店名は日本語で出ます。立体感を保ちつつ、名前がはっきり読めるのが利点です。
出典：Google
一方、SATELLITEは実際の建物や皇居の緑まで再現されます。街の雰囲気を伝えるなら、こちらが向いています。HYBRIDでは、その写真の上に施設名が重なります。
出典：Google
なお、ダークモードも試しました。ただし検証時点では、建物の立体表示が消えて平面になりました。今後の改善に期待したいところです。
出典：Google
実装方法と注意点
実装はシンプルです。modeに’ROADMAP’を指定するだけで道路地図になります。あとから値を変えれば、表示も切り替わります。
const { Map3DElement } = await google.maps.importLibrary('maps3d');
const map = new Map3DElement({
center: { lat: 35.6812, lng: 139.7671, altitude: 0 }, // 東京駅
range: 2000,
tilt: 60,
mode: 'ROADMAP', // 'SATELLITE' / 'HYBRID' も指定可能
});
document.body.append(map);
// あとから切り替える場合
map.mode = 'SATELLITE';使い分けの目安
公式ドキュメントでは、次のような使い分けが示されています。
- ROADMAP：ナビや店舗検索など、名前の読みやすさが大事なアプリ
- SATELLITE／HYBRID：不動産や観光など、見た目のリアルさが大事なアプリ
たとえば不動産サイトなら、道順はROADMAPで案内できます。そして、周辺の街並みはSATELLITEで見せられます。
まだ試験提供の段階
ただし、ROADMAPモードは試験運用版です。現在はベータ版とアルファ版でのみ使えます。そのため、正式版までに仕様が変わるかもしれません。本番サービスでは、正式提供を待つのが安全です。
また、10月1日の更新では、メモリ使用量や画質の設定も追加されました。つまり、「3D地図は重い」という課題にも対策が進んでいます。
エムベースからひとこと
個人的には3D地図は見栄えが良い反面、読み取りにくいのが課題でした。今回の更新は、その見やすさとメモリ対策という意味では一歩前進ではありますが、現在地が判り難かったり、正直もう少しですね…次に期待です。
エムベースは、Google Maps Platformを使った開発を数多く手がけてきました。3D地図の導入や移行も、お気軽にご相談ください。
位置情報関連の開発でお悩みの方は、ぜひエムベースの位置情報開発サービスをご確認ください。
まとめ
Googleの3D地図は、道路地図モードで「使える地図」に近づきました。まずは公式サンプルで、日本の街の見え方を試してみてはいかがでしょうか。
- 10月8日の更新で、3D地図に道路地図モードが追加
- 3つのモードをボタンひとつで切り替え可能
- 日本でも日本語ラベルで表示される
- 実装はmode: ‘ROADMAP’を指定するだけ
- 現在は試験運用版のため、本番利用は様子見が安全
