hsmwhsmw

初心者入門Google Maps JavaScript API入門

Home
eyecatch

Googleマップはグーグルが提供している地図サービスです。このGoogleマップをカスタマイズして独自のマーカーを表示させたり、指定した区間のルート検索を行ったりすることができるように色々なAPIが提供されています。ここではGoogleマップで提供されているAPIの中でもウェブサイトで利用者が操作可能な地図をカスタマイズして表示することができるGoogle Maps JavaScript APIの使い方の解説します。

※ Googleマップを利用者として使う場合の使い方については「Googleマップの使い方」を参照されて下さい。

なおJavaScriptの基本的な使い方については「JavaScript入門」を参照されてください。

Google Maps APIの基本

Google Maps APIを利用する基本的な知識と地図を指定した方法で表示する方法を確認します。

  • 地図の表示
  • Webページ内で地図が表示される位置と地図のサイズ
  • 地図を作成する
  • 地図の中心座標を設定する
  • [参考]Googleマップを使って座標(緯度と経度)とズームレベルを取得する
  • Google Maps APIを使って地図の中心と表示領域の座標を取得する
  • マップタイプ
  • 4つの基本マップタイプとマップタイプコントロールの使い方
  • マップタイプを設定する
  • マップタイプコントールの有効/無効の切り替えとコントロールに表示するマップタイプの選択
  • マップタイプコントールのスタイルの設定
  • マップタイプコントールの位置
  • マップタイプ変更時のイベント処理
  • 地図のズームレベル
  • ナビゲーションコントロールの有効/無効
  • ズームレベルの指定
  • ナビゲーションコントロールの種類
  • (全6記事の一覧へ ...)
  • 地図の移動
  • 指定の座標へ移動
  • 指定したピクセル分を移動
  • 指定した矩形領域が表示される位置へ移動
  • (全3記事の一覧へ ...)
  • 地図に対する操作の設定
  • キーボードを使った地図のコントロールの有効/無効
  • 地図に対するドラッグ操作の有効/無効
  • ダブルクリックによるズーム操作の有効/無効
  • (全4記事の一覧へ ...)

オーバーレイの配置

地図上にマーカーや情報ウィンドウなど様々なオーバーレイを配置する方法を確認します。

  • 情報ウィンドウ
  • 情報ウィンドウの作成
  • 情報ウィンドウを開く/閉じる
  • 情報ウィンドウに表示するコンテンツの設定
  • (全7記事の一覧へ ...)
  • マーカー
  • マーカーの作成
  • 地図へマーカーを配置/削除
  • マーカーのアイコンを指定
  • (全5記事の一覧へ ...)
  • ポリライン(GPolyline)
  • ポリラインの表示
  • 色/太さ/透明度の設定
  • 球面大地表面に沿って線を描く
  • (全6記事の一覧へ ...)
  • ポリゴン(GPolygon)
  • ポリゴンの表示
  • 色/太さ/透明度の設定
  • 地図上でポリゴンの頂点を移動
  • (全8記事の一覧へ ...)
  • オーバーレイ画像(GGroundOverlay, GScreenOverlay)
  • グラウンドオーバーレイの表示
  • グラウンドオーバーレイの表示/非表示の切り替え
  • スクリーンオーバーレイの表示
  • (全4記事の一覧へ ...)
  • タイルオーバーレイ(GTileLayer, GTileLayerOverlay)
  • タイルレイヤーの作成
  • タイルオーバーレイの表示
  • タイル位置とズームレベル毎に個別の画像を指定
  • (全5記事の一覧へ ...)

イベント処理とデータ管理

地図上でのイベント処理やデータの管理方法などについて確認します。

  • ジオコーディング(GClientGeocoder)
  • 住所から座標を取得
  • 候補一覧を取得
  • リバースジオコーディング
  • (全3記事の一覧へ ...)
  • イベント処理(GEvent, GEventListener)
  • イベントリスナーの登録
  • イベントリスナーの削除
  • イベントの生成
  • (全6記事の一覧へ ...)
  • ログの出力(GLog)
  • ログの出力
  • リンク形式のログの出力
  • HTML形式のログの出力
  • (全3記事の一覧へ ...)
  • 外部ファイルの読み込み(GDownloadUrl)
  • ファイルの取得の手順
  • テキストファイルの取得
  • XMLファイルの取得
  • (全4記事の一覧へ ...)

その他の機能とサンプル

地図上でのイベント処理やデータの管理方法などについて確認します。

  • マーカーの表示管理(GMarkerManager)
  • 表示されるズームレベルを指定しマーカーを表示
  • マーカーをまとめて追加
  • ルート案内(GDirections)
  • GDirectionsクラスのオブジェクトを作成
  • 2点間のルート案内
  • ルート案内のクリア
  • (全18記事の一覧へ ...)
本ホームページ内の文書中の登録商標は、一般にその所有者のものです。
本ホームページは Google, Inc. 及び グーグル株式会社が後援または提携するものではありません。
Google Maps は Google Inc. の登録商標です。