Google MAPS APIプログラミング

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

Google MAPS APIを使うための準備

Google MAPS API keyを取得する

Google MAPS APIでのデバッグ

GLog.writeによるログ出力


Google Maps Javascript自動生成ツール

Google maps簡単作成ツール:GMapCreator


Google MAPS API

Google MAPS APIの単純な例

初期化位置を指定する

衛星地図表示にする

地図+衛星写真のハイブリッド表示にする

立体地図表示にする

簡易コントロールボタンを表示する

コントロールボタンを表示する

地図/衛星写真 切り替えボタンを表示する

地図/衛星写真 切り替えボタンの表示位置を指定する

GOverviewMapControlを追加する

ローカル検索機能を表示する

キーボードで地図を操作できるようにする

地図をドラッグで移動できないようにする

クリック処理

Zoomイベントを取得する

moveイベントを取得する

movestartイベントを取得する

moveendイベントを取得する

maptypechangedイベントを取得する

ふきだしを表示する

ふきだし内のメッセージにHTMLを利用する

ふきだし内のメッセージに画像を入れる

ふきだし内のメッセージにYouTubeを入れる

拡大地図のふきだしを出す

ふきだし+クリック処理

ふきだしを閉じる

GMarkerクリック⇒ふきだし表示

マーカーを貼り付ける

マーカーを貼り付ける(画像マーカー)

マーカーにふきだしを付ける

マーカーにクリックイベント処理を割り当てる

マーカー上にマウスが来たらふきだしを表示

ドラッグ可能なマーカの作成

ドラッグ後にマーカが跳ねないようにする

GMarkerOptions

画面上に画像を固定表示する

アニメーションしながら移動する

アニメーションしながら連続的に移動する

GPolylineで線を引く

GPolylineで線を引く(2)

2点間の距離を求める

GPolygonで図形を描く

GPolygonクリック処理

面積を計測する

Formと組み合わせる

radioボタンと組み合わせる

checkboxと組み合わせる

selectと組み合わせる

selectフォームと地図タイプを連動させる

住所情報 (GClientGeocoder)

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

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

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

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

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

Google Mapsを半透明にする

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

Google maps APIでAJAX

GXmlHttpを使ってテキストファイルを取得する

GXmlHttpを使ってXMLファイルを取得する

GXmlHttpにCGIからXMLを渡す

GXmlHttpにPHPからXMLを渡す

GXmlHttpを使ってCGIに情報を渡す

GXmlHttpを使ってPHPに情報を渡す

アフィリエイトと組み合わせる

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

Google Maps API version 2

Google Maps API version 2 変更点概要

旧 version 1 API解説

Google Maps API version 3

W3C Geolocation Standardを利用する


その他

Google MapsでGoogle Earthを表示する

地震を表現する

緯度/経度の取得

日本語エスケープ

山手線ぐるぐるぐる




カスタム検索




はてなRSSに追加
Subscribe with livedoor Reader
Subscribe with Bloglines
Add to goo

外部サイト

プレコ王国
ディスカス魂
金魚タイムズ
YouTubeチャネル
Twitter
mixi(ほぼ未使用)


フィードメーター - Geekなぺーじ にほんブログ村 IT技術ブログへ
Copyright (C) Geekなページ.
All rights reserved. 無断転載や無断コピーなど、私的利用の範囲を逸脱した利用はおやめ下さい.