【Javascript】Ajax Google Mapsを自サイトに設置する

Google Mapsを自サイトに設置する

---

1: Google Maps とXMLHttpRequest
2: Google Maps 設置までの流れ
3: Google Maps はじめの一歩
4: 地図にマーカーを表示する

9/15と、 9/30のサンプルは、都道府県庁の経緯度データをAjaxな通信で取り出し表示する、というものでしたが、 今回から数回にわけて、このようなAjaxな仕組みも利用しつつ、地図を表示してみます。地図には、Google Mapsを利用します。

Google Mapsは、それがなければ、Ajaxという言葉がこれほど広まらなかったかもしれないほどの影響を与えたAjaxアプリといえますが、もしかすると、それ以上に、世界中にインパクトを与えた特徴があります。

それは、この高機能で精密な地図を、自由にカスタマイズして、なんと、無料で自分のサイトへ設置することができるということです。

これまで、Web上の地図を自分のサイトで利用するには、普通は利用料が必要でした。自サイトへ自由に、しかも、精度の高い、高機能な地図を設置するのは一般のWebユーザーや小さなお店などには高嶺の花だったのです。


しかし、それらのビジネスモデルを、Google Mapsは、あっというまに転換してしまう勢いで普及しつつあります。今回は、このGoogle Mapsで提供されているGoogle Maps APIを利用して、実際に自分のサイトに地図を置いてみることを試してみます。 (右のサンプル画像は、拙著、『入門Ajax』より引用)

Google Maps とXMLHttpRequest

とはいえ、驚かれるかもしれませんが、実は、このようにAjaxの代表格と目されるほどのGoogle Mapsですが、これは、決して、XMLHttpRequestをふんだんに使用したアプリというわけではありません。Google MapsのAPIには、GXmlHttpというクラスがあって、それでAjaxな通信を行えるようになってはいますが、このクラス無しでもGoogle Mapsはグリグリ動作するのです。

AjaxイコールXMLHttpRequestという考え方もあるようですが、Google Mapsで多くの人々が注目したのは、おそらくは、あの「新鮮なグリグリ感のインターフェイス」であって、必ずしも、従前からあった多少カビ臭い技術「XMLHttpRequest」や「非同期通信」そのものではなかったと思います。その事を思い起こせば、Ajaxと呼ばれているイノベーションの中心は、何が何でもXMLHttpRequestでなければいけないというわけでもない、のかな？と思います。

まして、今回のように自サイトへ設置するとなれば、別ドメインの制約がかかりますから、自サイトへ接続したユーザーは、GoogleのサイトとXMLHttpRequestな通信を行うことはできません。XMLHttpRequestな通信を行うとすれば、もっぱら自サイトとユーザーとの間で行われることになります。しかも、使わなくてもかまいません。でも、Googleのサイトから送られてくる地図はグリグリ動くのです。Ajaxは単一の技術に依存しているわけではないのです。Googleアプリの後ろには、imageやDOMなども含めたJavaScriptの無数の枯れた技術が投入されています。

そんなことも、理解しつつ、Google Maps APIがもたらす、文字通り新しい世界を楽しんでみることにしましょう。

今回は、Google Mapsを利用するための簡単な説明と、簡単な地図を作ってみます。