Google Maps JavaScript APIプログラミング

ここでは、Google Maps JavaScript API(version 3)を使って遊ぶ方法を説明したいと思います。 Google Maps JavaScript APIを使うと、グーグル社が提供する衛星写真や地図を使ってホームページ上で色々なものを作れます。 対象とする読者は初心者もしくは入門者です。 Google Maps APIはJavaScriptを使って書いてあるので、JavaScriptの知識があった方がわかりやすいと思いますが、Java Scriptがわからなくても何と無くわかるような説明を目指したいと思っています。

基本編

Google Maps APIの単純な例

地図の種類を切り替える

地図の中心を移動する

地図上にふきだしを表示

地図がクリックされたときの処理

マップタイプコントロールを無効にする

緯度経度取得ツール

要望が多いので緯度経度情報を取得するツールを作りました。

緯度/経度の取得

住所から緯度/経度を取得

Marker

Markerを設置する

Markerのクリック処理

画像を指定してMarkerを作成する

Marker上にマウスが乗ったときにInfoWindow(ふきだし)を表示する

Formと組み合わせる

buttonと組み合わせる

checkboxと組み合わせる

radioボタンと組み合わせる

selectと組み合わせる

Mapクラス

中心位置を滑らかに移動させる

ズームを変更する

図形 (オーバーレイ)

Circleで円を描く

Rectangleで四角形を描く

Polylineで線を引く

Polygonで図形を描く

カスタムコントロール

カスタムコントロールを作る

selectをカスタムコントロールとして設置する

住所情報 (Geocoder)

住所を使って緯度経度を取得する

道案内 (DirectionsService)

道案内サービスを利用する(途中経路にマーカを設置)

道案内サービスを利用する(道案内情報を取得)

GeoLocation

W3C Geolocation Standardを利用する

Elevation Service (高度情報)

高度情報を取得する

パスに沿って高度情報を取得する

スタイルシートと組み合わせる

Google Mapsの上にアニメーションGIFを配置する

Google Mapsアニメーション＋アニメーションGIF

Google Mapsを半透明にする

Yahoo!地図との切り替え表示

デバッグ

Google Maps APIでのデバッグ

その他

日本語エスケープ

山手線ぐるぐるぐる

Google maps APIとAmazonアフィリエイトのMashup例

旧バージョン

旧 version 2 API解説

Google Maps API version 1からversion 2への変更点概要

旧 version 1 API解説