GoogleMaps アーカイブ

GoogleMaps活用するぞ!(1) - はじめに。関連サイトから --->2006年07月15日

GoogleMaps活用するぞ!(2) - Google アカウント登録 --->2006年07月16日

GoogleMaps活用するぞ!(4) - Google Mapsを呼び出そう --->2006年07月18日

GoogleMaps活用するぞ!(5) - 簡単な地図ページを作ってみよう --->2006年07月19日

GoogleMaps活用するぞ!(6) - 地図にコントロールを加えよう --->2006年07月20日

GoogleMaps活用するぞ!(7) - 緯度経度を表示しよう --->2006年07月21日

GoogleMaps活用するぞ!(8) - そろそろページらしくしてみよう --->2006年07月22日

GoogleMaps活用するぞ!(9) - マーカーを打ってみよう --->2006年07月24日

GoogleMaps活用するぞ!(10) - マーカーを変えてみよう --->2006年07月26日

GoogleMaps活用するぞ!(11) - 自作のマーカーを置いてみよう --->2006年07月28日

GoogleMaps活用するぞ!(12) - ポリラインをひこう --->2006年07月30日

GoogleMaps活用するぞ!(13) - インフォウィンドウを開こう --->2006年07月31日

GoogleMaps活用するぞ!(14) - タブインフォウィンドウを開こう --->2006年08月01日

GoogleMaps活用するぞ!(15) - マーカークリックでウィンドウを出そう --->2006年08月03日

GoogleMaps活用するぞ!(16) - クリック、ダブルクリック、マウスオーバーでマーカーを操作しよう --->2006年08月04日

メモ - Google Mapsとメモリーリーク問題 --->2006年08月06日

GoogleMaps活用するぞ!(17) - クリックした地点にマーカーを出してみよう --->2006年08月07日

GoogleMaps活用するぞ!(18) - 地図入りウィンドウを出そう --->2006年08月10日

GoogleMaps活用するぞ!(19) - インフォウィンドウに地図を埋め込もう --->2006年08月14日

GoogleMaps活用するぞ!(20) - スタイルシート等でインフォウィンドウを整形しよう --->2006年08月18日

GoogleMaps活用するぞ!(21) - 情報ウィンドウの数を増やそう --->2006年08月19日

GoogleMaps活用するぞ!(22) - TLabelで情報ウィンドウを作ろう --->2006年08月23日



2006年07月15日

GoogleMaps活用するぞ!(1) - はじめに。関連サイトから

ほんの4日前からGoogle Mapsを始めた分際で、もう研究カテゴリーを立ち上げてしまった、、まあよい、逡巡は拙速に如かず。本カテゴリーは、サイトが英語でとっつきの悪いGoogle Mapsを活用したページをツールに頼らず自作してみるために、英文の内容を訳したりしながらその内容に近づいてみようというのがその主旨であります。Google社から重要情報が流されるGoogle Maps API Blogについても、別のカテゴリーで更新内容をチェックしていきたいと考えています。勉強している最中なので、内容は過去のものも逐次書き換えていくと思います。

重要な関連サイトは、以下の三つ。


Google Accounts

Googleからアカウントを取得する(無料)ページ。アカウントを取得することによって、Google Maps API のサービスを使うことができる。


Google Maps API

本サイト。中身は、



Google Maps APIトップページ。
Sign up for an API key書かれてある使用条件に同意の上サインアップすれば、登録したディレクトリに対応するAPI keyが支給されます。
API DocumentationGoogle Maps API Version 2 Documentation。プログラミングに必要な各種仕様が載せられています。
API Helpヘルプページ。
Terms of UseSign up for an API keyで置かれている使用条件のHtml版。
API Blogオフィシャルブログ。下を参照。
API Discussion GroupGoogle Maps APIについてのディスカッション・ボード。会員制。


Google Maps API Blog

Google Maps API のオフィシャルブログ。ポリシーの重要な変更や、機能の追加、仕様の重要な変更などについて、ここで通知されます。

2006年07月16日

GoogleMaps活用するぞ!(2) - Google アカウント登録

Google アカウントは、


  • 登録は無料です(アカウントを使って有料サービスにアクセスしたときには、その料金がかかります)。

  • Gメールがグーグル社から自動的に届くことはありません。

  • Google グループ、Froogle ショッピング リスト、パーソナライズド検索、パーソナライズド ホームページ、Google Answers などのサービスを使うことができます。もちろん、Google Mapsを使うのにも必要です。

  • ユーザーネームはあなたのメールアドレスが使われます。作成後に、メールアドレスとパスワードの変更もできます。

詳しいことは、Google アカウントヘルプページを読んでください。以下に、アカウント登録・登録内容の変更の流れだけを書きます。

続きを読む "GoogleMaps活用するぞ!(2) - Google アカウント登録" »

2006年07月18日

GoogleMaps活用するぞ!(4) - Google Mapsを呼び出そう

さて、API Keyの登録に成功したならば、これから地図を組み上げていくことになります。

今後は、htmlタグの基本を理解していることを大前提として書いていくことにします。ゆえにhtmlタグについての解説は、いちいち行ないません。

続きを読む "GoogleMaps活用するぞ!(4) - Google Mapsを呼び出そう" »

2006年07月19日

GoogleMaps活用するぞ!(5) - 簡単な地図ページを作ってみよう

前回の例を、再出します。ただし、余計なコメントの行は省略しています。

続きを読む "GoogleMaps活用するぞ!(5) - 簡単な地図ページを作ってみよう" »

2006年07月20日

GoogleMaps活用するぞ!(6) - 地図にコントロールを加えよう

前回取り上げた行の部分を下のように書き換えることによって、このような地図が出てきます。

map.setCenter(new GLatLng(35.660373, +139.729260), 17);

005_02.JPG

続きを読む "GoogleMaps活用するぞ!(6) - 地図にコントロールを加えよう" »

2006年07月21日

GoogleMaps活用するぞ!(7) - 緯度経度を表示しよう

「サテライト」画面でローマのバチカンを写してみました。サンピエトロ寺院の形が鮮明にわかります。

007_01.JPG

前回取り上げたAPI Documentaionに用意されている6つのコントロールの中から、上の図では以下の三つを表示してあります。

  • GSmallMapControl - 小型のズームと位置移動コントロール。地図の左上に表れる。
  • GScaleControl - 地図のスケール(縮尺)
  • GMapTypeControl - 地図のタイプを切り替えるコントロール(地図表記、サテライト、デュアル)

続きを読む "GoogleMaps活用するぞ!(7) - 緯度経度を表示しよう" »

2006年07月22日

GoogleMaps活用するぞ!(8) - そろそろページらしくしてみよう

ページに地図を埋め込む

そろそろ文字を書き込んだりして、ページらしくしてみましょう。例として、下のようにタグを書いてみました。このタグの中のGoogle Mapsには、以下の機能を付けています。

  • GLargeMapControl(大型のズームと位置移動コントロール)、GScaleControl(地図のスケール)、GMapTypeControl(地図のタイプを切り替えるコントロール)の三つのコントロールを付けています。(赤字の部分)
  • 横の長さ500ピクセル、縦の長さ500ピクセル。
  • 緯度経度を下に表示しています。(紫字の部分)
  • 中心位置はサンフランシスコ、アルカトラズ島。ズームは16段階。

ページらしくするために今回付け加えた部分は、緑色で示しています。

続きを読む "GoogleMaps活用するぞ!(8) - そろそろページらしくしてみよう" »

2006年07月24日

GoogleMaps活用するぞ!(9) - マーカーを打ってみよう

Google Mapsは地図上に自由に表示できるアイテムとして、マーカーポリライン(直線)とウィンドウが用意されています。この三つを組み合わせれば、多彩なデータベースを作ることができるでしょう。まずは、マーカーから見ていきましょう。

続きを読む "GoogleMaps活用するぞ!(9) - マーカーを打ってみよう" »

2006年07月26日

GoogleMaps活用するぞ!(10) - マーカーを変えてみよう

Google Mapsデフォルトのマーカーでも、十分役に立てることができす。しかし一種類しかありません。もっとマーカーの色や形をいろいろ変えて分かりやすくしたいと考えるのは、人情というものでしょう。今回は、自分でカスタマイズしたマーカーを用意して地図上に表現することを試みます。

続きを読む "GoogleMaps活用するぞ!(10) - マーカーを変えてみよう" »

2006年07月28日

GoogleMaps活用するぞ!(11) - 自作のマーカーを置いてみよう

前回の例では、Google Ride FinderのアイコンをGoogleサイトから読み出して、表示しました。これを自分のサイトから自作のアイコンを読み出すように、設定を変更すればよいのです。

以下の例では、サイト内の同じフォルダに地図ページとアイコンファイルを置いて設計しています。つまり、[map]というディレクトリ=フォルダでAPI Keyを登録したとすれば、


[map] - maptest01.html ----->Google Mapsを埋め込んだ地図ファイル
hide.png ----->自作のアイコンファイルその1
mitsu.png ----->自作のアイコンファイルその2


というファイル構成で設計しています。

続きを読む "GoogleMaps活用するぞ!(11) - 自作のマーカーを置いてみよう" »

2006年07月30日

GoogleMaps活用するぞ!(12) - ポリラインをひこう

Google Mapsが用意するポリラインは、次々に各点を指定することによって多角形を地図上に書くことができます。色や太さ、不透明度も指定することができます。


ポリラインの使う際の注意

インタネットエクスプローラでポリラインを表示する場合には、ページの冒頭に下の赤字の部分を追加しなければならないようです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">

Google Maps API Documentationの"XHTML and VML"の項目では、違うことが書かれています。しかし、私が試してみた限り、上の指定で十分なようです。

続きを読む "GoogleMaps活用するぞ!(12) - ポリラインをひこう" »

2006年07月31日

GoogleMaps活用するぞ!(13) - インフォウィンドウを開こう

今回から、インフォウインドウについて見ていくことにします。



インフォウインドウ(タブなし)を開く基本スクリプト


まず最初に、最もシンプルなタブなしのインフォウィンドウの開き方について見ます。

Google Mapsには、openInfoWindowopenInfoWindowHtmlの二種類のメソッドが用意されています。

openInfoWindowは、DOM(Document Object Model)ノード形式でウィンドウ内の情報を記入するためのメソッドです。

一方、openInfoWindowHtmlは、html形式でウィンドウ内の情報を記入するためのメソッドです。

これまでの例と同じく、最初に定義する地図を描くための変数を"map"とすると、それぞれを用いてウィンドウを表示するスクリプトは、以下のとおりです。

var 変数 = new GLatLng( 緯度 , 経度 );
map.openInfoWindow(変数, DOMノード[, オプション値]) ;


var 変数 = new GLatLng( 緯度 , 経度 );
map.openInfoWindowHtml(変数, html文[, オプション値]) ;

続きを読む "GoogleMaps活用するぞ!(13) - インフォウィンドウを開こう" »

2006年08月01日

GoogleMaps活用するぞ!(14) - タブインフォウィンドウを開こう

前回は、一枚ページのインフォウインドウの開き方を見ました。今回は、タブのついたインフォウインドウを見ます。

前回に引き続いて、タブインフォウインドウについても、もっぱらhtmlを用いるopenInfoWindowTabsHtmlメソッドだけに集中して検討します。



続きを読む "GoogleMaps活用するぞ!(14) - タブインフォウィンドウを開こう" »

2006年08月03日

GoogleMaps活用するぞ!(15) - マーカークリックでウィンドウを出そう

今回は、Google Mapsをデータベースとして設計する際に最も基本的な、マーカークリックによるウィンドウ表示を検討します。個人のホームページのレベルならば、これとコントローラーだけでも内容次第によってはGoogle Mapsで十分高度なものが作れるでしょう。



続きを読む "GoogleMaps活用するぞ!(15) - マーカークリックでウィンドウを出そう" »

2006年08月04日

GoogleMaps活用するぞ!(16) - クリック、ダブルクリック、マウスオーバーでマーカーを操作しよう

今回は、マーカーとインフォウィンドウを連動させる他の操作について、いくつか検討します。


以下の内容は、API DocumentationのClass Referenceを参照しています。


マーカーにマウスを乗せる(マウスオーバー)ときにインフォウィンドウを出す

マーカークリックでインフォウィンドウを消す

例:マウスオーバーでウィンドウを出す+クリックでウィンドウを消す

マーカークリックでマーカーを中央に移動&ズーム変更

マーカーダブルクリックでインフォウィンドウを出す(消す)

例:マーカーを中央に移動&ズーム変更+ダブルクリックでウィンドウを出す


続きを読む "GoogleMaps活用するぞ!(16) - クリック、ダブルクリック、マウスオーバーでマーカーを操作しよう" »

2006年08月06日

メモ - Google Mapsとメモリーリーク問題

(この文は、連載している「Google Maps活用するぞ!」とは別の、暫定的メモです。)

とうとう、ブログ内のGoogle Mapsを使ったコーナー「半径半里図会」が、私のブラウザ上でフリーズし始めた。これまでボタンをクリックするとGoogle Mapsのための新しいウィンドウをポップアップさせる形式に設計していたのだが、最近閉じるとブラウザ上で次の行動ができなくなるケースが非常に増えた。

インターネットエクスプローラ(以下、IE)には、メモリーリークの固有問題があるらしい。それと関係があるのかどうかは、私にはよくわからない。Google Maps APIでは、IEのこのメモリーリーク問題を回避するためにGUnload()が用意されている。説明ではこれをページの<body>内に<body onunload="GUnload()">と書き込むことによって、メモリーリーク問題は減少すると書いてあるのであるが、、、、

とにかく、自分のブラウザ上でうまく操作できないようでは話にならないので、ポップアップウィンドウの形式をやめにして別ページに移動する形式に変えてみた。どういうわけか、これを用いると(今のところは)おおむね問題なく各ページを見ることができる。ひょっとしたらポップアップしたGoogle Mapsのページを閉じても、メモリー領域が開放されていないのかもしれない。だからフリーズするのであろうか。

2006年08月07日

GoogleMaps活用するぞ!(17) - クリックした地点にマーカーを出してみよう

今回は、クリックした地点に新たにマーカーを出す(さらに、再度クリックしたときにマーカーを消す)操作について、検討します。


クリックした地点に新たにマーカーを出す


クリックした地点にマーカーを出すための基本スクリプトは、たとえば以下のとおりです。


GEvent.addListener(map, "click", function(任意の変数a, 任意の変数b) {
map.addOverlay(new GMarker(任意の変数b[, アイコン変数 ]))
});


続きを読む "GoogleMaps活用するぞ!(17) - クリックした地点にマーカーを出してみよう" »

2006年08月10日

GoogleMaps活用するぞ!(18) - 地図入りウィンドウを出そう

今回は、showMapBlowupメソッドを使って地図入りウィンドウを出すことを、検討します。


showMapBlowupメソッド


showMapBlowupメソッドは、以下の数値を指定します。


showMapBlowup(緯度経度[, オプション値])


続きを読む "GoogleMaps活用するぞ!(18) - 地図入りウィンドウを出そう" »

2006年08月14日

GoogleMaps活用するぞ!(19) - インフォウィンドウに地図を埋め込もう

今回は、『GOOGLE MAPS HACKS』(Rich Gibson,Schuyler Erle著、オライリージャパン)の第6章に紹介されていたテクニックを使って、インフォウィンドウの中に地図画面を埋め込むテクニックに挑戦します。Google Mapが用意するshowMapBlowupメソッドではテキストや他の画像をウィンドウ内に埋め込むことができませんが、このテクニックを使えば可能となります。だから、より一層使い勝手がよいと思います。ただし、htmlの知識に加えて、スタイルシートの知識が多少必要となります。


続きを読む "GoogleMaps活用するぞ!(19) - インフォウィンドウに地図を埋め込もう" »

2006年08月18日

GoogleMaps活用するぞ!(20) - スタイルシート等でインフォウィンドウを整形しよう

前回で検討した、インフォウィンドウの中にGoogle Mapを表示する方法の中には、スタイルシートを使ってインフォウィンドウを整形するテクニックが含まれています。今回はこれをもう少し突っ込んで取り上げます。このテクニックを使えば、インフォウィンドウのオプション値を指定することなしに横幅が指定できるだけでなく、インフォウィンドウのオプション値で指定できない縦幅も指定することができます。


続きを読む "GoogleMaps活用するぞ!(20) - スタイルシート等でインフォウィンドウを整形しよう" »

2006年08月19日

GoogleMaps活用するぞ!(21) - 情報ウィンドウの数を増やそう

Google Mapには、タブつきとタブなしのインフォウィンドウが用意されています。たとえばマーカーをクリックしたらインフォウィンドウが飛び出るように作りこめば、まずこれで一種類の情報をユーザーに渡すことができます。

さらにアイコンをカスタマイズして、情報の中身によってアイコンを変える。都合これで二種類の情報になります。しかし、まだ足りないと感じたらどうするべきでしょうか。今回以降、もう一種類情報を追加するために、例えばマウスオーバーしたときに別種の情報ウィンドウを開く方法を検討してみます。


続きを読む "GoogleMaps活用するぞ!(21) - 情報ウィンドウの数を増やそう" »

2006年08月23日

GoogleMaps活用するぞ!(22) - TLabelで情報ウィンドウを作ろう

今回は、Tom Mangan氏が開発したTLabelを活用して情報ウィンドウを作ってみることにします。

TLabelのサイト(英語) : http://gmaps.tommangan.us/tlabel.html



続きを読む "GoogleMaps活用するぞ!(22) - TLabelで情報ウィンドウを作ろう" »