今回取り組む内容の仕様としては、以下の通りである。

• ブログを利用する。
• ブログに自分の好きな地域（どこかは予め決めておく）の地図を表示する。
• 地図にはマーカーが表示される。
• マーカーの情報は AJAX (XMLHttpRequest) の非同期通信により、サーバーから XML ファイルを読み込んだものである。
• マーカーをクリックすると吹き出しにその地点の情報が出る。
• 吹き出し中の「続きを読む」リンクをクリックすると、ブログエントリにジャンプする。
• マーカーは自分独自のアイコンを使う。

まずは、実例をみてイメージをつかんでもらった方がいいだろう。

• 拙作のサイト→ yas の部屋「ベイエリアレストランガイド」

このサイトで動作している JavaScript は以下のものである。 このスクリプトは以下のようなフォーマットの XML データを利用する。 さて、それでは仕組みについてひとつひとつ説明していこう。 今回の動作確認済み環境としては、以下の通りである (2005/10/28 現在)。

Movable Type 3.2 Release 2 (日本語版)
Firefox 1.0.7 または IE 6.0SP2 または Safari 2.0.1

というわけでここでは Movable Type 3.2 Release 2 (日本語版) と Firefox 1.0.7 を例に取って話を進める。以下は必要な手順である。 それではまずはアイコンについ説明しよう。

• Google Map API では、マーカーと呼ばれるポイントを指し示すアイコンが必要となる。Google が用意したデフォルトのマーカーアイコンはオレンジ色の水玉を逆さにしたような感じのものだが、これは自由にカスタマイズできる。
• アイコンの実体は画像ファイルである。画像のフォーマットは、JPEG、GIF、PNG が使えるが、PNG がいいだろう。
• なぜなら、アイコンには影を付けられるのだが、この影は、αチャネルを透過にした PNG を使うことになっているからだ (まぁ、どの画像フォーマットを選ぶかは実際は好みの問題だ)。
• ちなみにアイコンの影は、オリジナルのアイコンに対して45度の傾きを付けるのが、Google からのガイドラインのようである。実際影をつけるのは結構難しかった。私の場合はオリジナル画像をグレー処理し、その後何度かソフト処理をし、ぼかしをかけた…という感じで、この作業に多くの時間を取ってしまった＾＾；

以下、JavaScript からのアイコン部分生成に関する抜粋だ。要は、GIcon オブジェクトに用意されているいろいろなプロパティを設定してあげれば、自分で作ったアイコンが表示されるのである。 次に肝心の JavaScript であるが、Movable Type のテンプレート作成機能を利用する。Movable Type で、環境設定 / テンプレート－モジュールと選択していき、「モジュールを新規作成」をクリックして以下のように作成（設定）し、保存する。

• テンプレート名: gmap.js (←ここは実は何でもいい)
• このテンプレートにリンクするファイル: gmap.js (別のテンプレートから使用するファイル名)
• モジュールの内容: 冒頭の JavaScript

JavaScript を保存したら、

map.xml

というファイル名で、XML ファイルを保存する。以下に XML ファイルの内容 (属性) を説明しよう (属性は独自に設定したものです)。 ※…「Movable Type のブログのエントリへのリンク」とあるのは、個別ブログについている ID である。個々のブログエントリのソースを見ればわかると思う。 これでスクリプト & XML データの準備が整うので、テンプレートを修正する。環境設定 / テンプレートで、

• メインページ
• アーカイブ → カテゴリーアーカイブ
• アーカイブ → 日付アーカイブ
• アーカイブ → 個別エントリーアーカイブ

のすべてのテンプレートにおいて、 のように修正する。onLoad="..." で最初に呼ばれる関数を指定しないと、IE ではうまく動作しなかった。また、吹き出し中に表示されるリンクをクリックすることによって、個別のブログエントリにジャンプできるように、テンプレートを少し修正する。ブログエントリのタイトルを表示する箇所を見つけ、以下のように... タグをはさむ。 また、個別エントリから地図に戻れるように、以下の部分の最後に「地図に戻る」リンクを追加する。「#a000835」とある部分は、個別ブログエントリで、Google Map を表示したいブログエントリの ID である。 続いてスタイルシートも設定してしまおう。Movable Type のテンプレート→スタイルシートで、スタイルシートの最後に以下の内容を追加する。 こんな具合である。#map と #infoWindow を自由にいじってみて欲しい (#InfoWindow は実は JavaScript 中にそのように設定できるように記述してある)。 最後はブログエントリの追加である。ブログの本文に、以下の1行を追加すれば Google Map が表示される。width と height は地図の大きさなので自由に設定して欲しい。 今回取り組む内容の仕様としては、以下の通りである。

• ブログを利用する。
• ブログに自分の好きな地域（どこかは予め決めておく）の地図を表示する。
• 地図にはマーカーが表示される。
• マーカーの情報は AJAX (XMLHttpRequest) の非同期通信により、サーバーから XML ファイルを読み込んだものである。
• マーカーをクリックすると吹き出しにその地点の情報が出る。
• 吹き出し中の「続きを読む」リンクをクリックすると、ブログエントリにジャンプする。
• マーカーは自分独自のアイコンを使う。

まずは、実例をみてイメージをつかんでもらった方がいいだろう。

• 拙作のサイト→ yas の部屋「ベイエリアレストランガイド」

このサイトで動作している JavaScript は以下のものである。 このスクリプトは以下のようなフォーマットの XML データを利用する。 さて、それでは仕組みについてひとつひとつ説明していこう。 今回の動作確認済み環境としては、以下の通りである (2005/10/28 現在)。

Movable Type 3.2 Release 2 (日本語版)
Firefox 1.0.7 または IE 6.0SP2 または Safari 2.0.1

というわけでここでは Movable Type 3.2 Release 2 (日本語版) と Firefox 1.0.7 を例に取って話を進める。以下は必要な手順である。 それではまずはアイコンについ説明しよう。

• Google Map API では、マーカーと呼ばれるポイントを指し示すアイコンが必要となる。Google が用意したデフォルトのマーカーアイコンはオレンジ色の水玉を逆さにしたような感じのものだが、これは自由にカスタマイズできる。
• アイコンの実体は画像ファイルである。画像のフォーマットは、JPEG、GIF、PNG が使えるが、PNG がいいだろう。
• なぜなら、アイコンには影を付けられるのだが、この影は、αチャネルを透過にした PNG を使うことになっているからだ (まぁ、どの画像フォーマットを選ぶかは実際は好みの問題だ)。
• ちなみにアイコンの影は、オリジナルのアイコンに対して45度の傾きを付けるのが、Google からのガイドラインのようである。実際影をつけるのは結構難しかった。私の場合はオリジナル画像をグレー処理し、その後何度かソフト処理をし、ぼかしをかけた…という感じで、この作業に多くの時間を取ってしまった＾＾；

以下、JavaScript からのアイコン部分生成に関する抜粋だ。要は、GIcon オブジェクトに用意されているいろいろなプロパティを設定してあげれば、自分で作ったアイコンが表示されるのである。 次に肝心の JavaScript であるが、Movable Type のテンプレート作成機能を利用する。Movable Type で、環境設定 / テンプレート－モジュールと選択していき、「モジュールを新規作成」をクリックして以下のように作成（設定）し、保存する。

• テンプレート名: gmap.js (←ここは実は何でもいい)
• このテンプレートにリンクするファイル: gmap.js (別のテンプレートから使用するファイル名)
• モジュールの内容: 冒頭の JavaScript

JavaScript を保存したら、

map.xml

というファイル名で、XML ファイルを保存する。以下に XML ファイルの内容 (属性) を説明しよう (属性は独自に設定したものです)。 ※…「Movable Type のブログのエントリへのリンク」とあるのは、個別ブログについている ID である。個々のブログエントリのソースを見ればわかると思う。 これでスクリプト & XML データの準備が整うので、テンプレートを修正する。環境設定 / テンプレートで、

• メインページ
• アーカイブ → カテゴリーアーカイブ
• アーカイブ → 日付アーカイブ
• アーカイブ → 個別エントリーアーカイブ

のすべてのテンプレートにおいて、 のように修正する。onLoad="..." で最初に呼ばれる関数を指定しないと、IE ではうまく動作しなかった。また、吹き出し中に表示されるリンクをクリックすることによって、個別のブログエントリにジャンプできるように、テンプレートを少し修正する。ブログエントリのタイトルを表示する箇所を見つけ、以下のように... タグをはさむ。 また、個別エントリから地図に戻れるように、以下の部分の最後に「地図に戻る」リンクを追加する。「#a000835」とある部分は、個別ブログエントリで、Google Map を表示したいブログエントリの ID である。 続いてスタイルシートも設定してしまおう。Movable Type のテンプレート→スタイルシートで、スタイルシートの最後に以下の内容を追加する。 こんな具合である。#map と #infoWindow を自由にいじってみて欲しい (#InfoWindow は実は JavaScript 中にそのように設定できるように記述してある)。 最後はブログエントリの追加である。ブログの本文に、以下の1行を追加すれば Google Map が表示される。width と height は地図の大きさなので自由に設定して欲しい。

クリックすると経度・緯度が表示されます。クリックすると経度・緯度が表示されます。

Google Maps API を勉強してみた。サンプルプログラムを見ただけでなんとなく使い方がわかるくらい、非常に簡単に使えるという印象である。その割りに見た目 GUI 的にすごいことをやってそうに見えるモノである。 以下は、スクリプト中のコメントにあるように

1. クリックしたとろにマーカーを置き
2. そのマーカーを地図の中心に移動させると共に
3. 吹き出しに緯度経度を表示する

Google Maps API を勉強してみた。サンプルプログラムを見ただけでなんとなく使い方がわかるくらい、非常に簡単に使えるという印象である。その割りに見た目 GUI 的にすごいことをやってそうに見えるモノである。 以下は、スクリプト中のコメントにあるように

1. クリックしたとろにマーカーを置き
2. そのマーカーを地図の中心に移動させると共に
3. 吹き出しに緯度経度を表示する

1. 配列の頭に付けるのは@であるから、その後の配列の要素の列挙においてハッシュを宣言する。このときハッシュの各要素は {...} でくくって 「key => value」 としている。それぞれの要素はカンマ(,) で区切る。配列の宣言の最後はセミコロン (;) である。
2. 各要素へのアクセスはまず配列を foreach でほぐす。ほぐした各要素は $db->{key} のように -> でアクセスできる。

1. 配列の頭に付けるのは@であるから、その後の配列の要素の列挙においてハッシュを宣言する。このときハッシュの各要素は {...} でくくって 「key => value」 としている。それぞれの要素はカンマ(,) で区切る。配列の宣言の最後はセミコロン (;) である。
2. 各要素へのアクセスはまず配列を foreach でほぐす。ほぐした各要素は $db->{key} のように -> でアクセスできる。