Maps JavaScript API

ウェブアプリ用に動的でインタラクティブな地図、位置情報、地理空間のエクスペリエンスを作成し、高度にカスタマイズすることができます。

使ってみる

Maps JavaScript API の一般的な機能を使って、作成を始めてみましょう。
Google Maps Platform のスタートガイドに沿って、アカウント作成と API キーの生成を済ませ、作成を始めましょう。
Maps JavaScript API を読み込んで、マーカーを配置した地図をウェブアプリに追加する方法を確認しましょう。
道路、地勢、スポットなど、地図に含まれるほとんどすべての要素をカスタマイズできます。
マーカーをクリックしたユーザーに追加の情報やコンテキストを伝える情報ウィンドウを表示します。

機能

Maps JavaScript API のコア機能のドキュメントを参照しましょう。
道路地図、衛星画像、ハイブリッド、地形図のほか、カスタム地図も表示できます。
地図上のテキストを、40 以上の言語に自動ローカライズします。
Google マップのデフォルトのマーカーを表示するほか、独自のカスタム スタイル マーカーを追加できます。
地図上に表示される UI コントロールをカスタマイズします。
ユーザーの操作やライフサイクル イベントに反応するコードを記述します。
ベクター形式の基本地図の上に、WebGL を活かした 3D および 2D のリッチなエクスペリエンスを構築します。
マーカーにインタラクティブな情報ウィンドウを表示し、コンテキストや情報を追加します。
ポリラインやポリゴンといった組み込み機能で、地図上にさまざまな図形を描画します。
データ、画像、その他の情報を地図に重ねて表示できるオーバーレイをカスタム作成します。
独自の画像を地図にオーバーレイ表示し、パン操作やズーム操作にも連動させます。
GeoJSON やその他のデータタイプを、地図上にさまざまな形式で表示します。
地図に含まれるほとんどすべての視覚的要素のスタイルをカスタマイズします。
ベクター形式の基本地図をプログラマティックに 3 次元で傾斜および回転させます。
密集しているマーカーをグループ化して、ユーザー エクスペリエンスをすっきりさせます。
地点ごとのデータの強弱を可視化します。

ライブラリ

Maps JS API を読み込むブートストラップ処理でオプションのライブラリを指定することにより、拡張機能を追加できます。
Maps JS API を読み込む際に、任意で利用できるライブラリをブートストラップする方法を確認しましょう。
地図上に図形を描画できるインタラクティブ機能をユーザーに提供しましょう。
地表面のジオメトリ データを処理するユーティリティ機能を活用しましょう。
付近の場所（スポット）の検索、Place Autocomplete の有効化、場所の詳細や写真の取得が可能です。
写真ギャラリー付きのスポット選択ツールを備えたインタラクティブな地図を追加しましょう。
地点ごとのデータの強弱をヒートマップで可視化しましょう。

サービス

組み込みのデータサービスを活用して、ウェブアプリの内容をさらに充実させましょう。
地図上の 2 点間のルートを取得します（経由地を 25 個まで指定可能）。
複数の出発地と目的地について、移動距離と所要時間を表で取得できます。
地表のさまざまな地点（海底を含む）の高度データを取得します。
住所や場所 ID から座標へ、またはその逆方向の変換を行います。
ある場所で利用できる画像の最大ズームレベルを取得します。
ウェブアプリに 360° ストリートビュー画像を追加できるほか、独自の画像もアップロードできます。

サンプルアプリ

そのまま使えるコードサンプルを、ローカルマシン上のお好みの開発環境で動かしてみましょう。
プレイス ライブラリを使って、付近の場所（スポット）を検索します。
カスタム地図スタイル設定により、ダークモード版の地図をウェブアプリに追加します。
地図上のマーカー アイコンをカスタム画像に変更します。
パン操作やズーム操作にも追随する、リッチな地図オーバーレイを作成します。
リッチな地図オーバーレイで、交通状況をリアルタイム表示します。
ベクター地図をプログラマティックに 3 次元で傾斜および回転させます。
その他のサンプルアプリ

ヘルプとサポート

誰かからサポートを受けて、誰かをサポートする。コミュニティに参加しましょう。

誰かからサポートを受けたり、誰かをサポートしたり。皆でよりよいマップを構築していきましょう。

バグを報告するか、機能リクエストを開きます。

プラットフォームのインシデントとサービス停止についてご確認ください。

Google Maps Platform チームにお問い合わせください。