住所からGoogle MAPに変換する(JavaScript編)

このサイトでは、PHPのSmartyプラグインで、住所からGoogle MAPに変換するプラグインを作成して公開しています。

あちらこちらで宣伝させていただいたら、なかなか好評で、ちょっと自己満足に浸ってたのですが、よく考えたらこのプログラムって、やってることのほとんどはJavaScriptじゃんということに気がついてしまいました。

そういうわけで、JavaScriptのみで同様の機能を提供するクラスを作成したので公開します。

ダウンロード

このクラスを使用すると、以下のようにid属性にaddrが指定された要素内のテキストを住所と見なして、id属性がgmapの要素内にGoogle Mapを挿入します。

<div id="addr">東京都千代田区永田町1-7</div>
<div id="gmap"></div>

JavaScript側の記述は、<head>〜</head>内で、「Google Maps API」、「Google Ajax Search API」、「prototype.js」と、このクラスファイルを<script src=”…”></script>して、bodyの下の方に以下の記述を入れれば完了です。

<script type="text/javascript">//<![CDATA[
var gmap = new addr2gmap();
gmap.display();
//]]></script>

PHP+Smarty版と比較すると若干めんどくさいのですが、ほとんどの環境で手軽に利用できるのがメリットです。

先に紹介した、PHP+Smarty版も同じくですが、CMSなどの会社概要のページに地図を表示させたい際に手軽にGoogle MAPが利用可能なように作成していますので、あえて低機能です。

マッシュアップなんて大それた用途ではなく軽い感じで使いたいという方にご利用いただけると嬉しい限りです。