“JavaScriptでGoogleMapsの地図用URLを表示する”という、夢実現のためのアファメーション。

JavaScriptでURLエンコード。

たとえば、GoogleMapsである住所の地図を表示する場合、GoogleMapsの検索ページで住所やランドマーク（場所の名前）を入力して「地図を検索」ボタンを押すとその地図が表示されるけど、あれはGoogleMapsの「q」というパラメータに文字列を渡すだけでOK。

ただし、文字コードやら使用しているブラウザによって、日本語がうまく通らない場合があるので（というか、ほとんど通らないはず）、検索する文字列をGoogleMaps側が処理できるような形式にしてあげなければならない。

そこで出てくるのが「URLエンコード」。
JSの場合は「encodeURI」という関数があるので、それを使えば一発でOK。

参考にさせてもらったのはこちら。

• URL（URI）エンコード・デコードを行う

こちら↑にあるJSを使えば、検索したい住所の文字列をURLで使えるようにエンコードすることができる。

たとえば「東京都中央区銀座1-1」であれば、
「%E6%9D%B1%E4%BA%AC%E9%83%BD%E4%B8%AD%E5%A4%AE%E5%8C%BA%E9%8A%80%E5%BA%A71-1」
ってな具合。
※番地などの数字やハイフンなどの記号は、GoogleMaps側がその差異を吸収してくれるので、全角半角どちらでもOK。

んで、このままでは住所の文字をエンコードしただけなので、GoogleMapsのURLとして利用できるように、JSをカスタマイズ。（さらに汎用的に利用できるように引数を設定）。

具体的なコードはこんな感じに。

<script type="text/javascript">
/*GoogleMapsのURLエンコード用関数*/
/* <![CDATA[ */
function EncodeStringToUri(formInput,encOutput,dispLink) {
var EncStr = encodeURI( document.getElementById(formInput).value );
var googlemapsUrl = "http://maps.google.co.jp/maps?q=" + EncStr;
document.getElementById(encOutput).value = googlemapsUrl;
document.getElementById(dispLink).href = googlemapsUrl;
document.getElementById(dispLink).target="_blank";
}
/* ]]> */
</script>

んで、使うときは、html側に住所入力用のフィールド（id="addressStr"）と結果表示用のフィールド（id="mapUrl"）を用意して、ボタンやリンクで上記の関数の引数に値を設定して呼び出せばOK。

例：<a href="javascript:void(0);" onclick="EncodeStringToUri('addressStr','mapUrl','mapLink')">地図URLの表示</a>

さらにリンク確認用のaタグ（id="linkUrl"）を用意して、そのhrefの属性にリンク先のGoogleMapsのURLを突っ込んで飛ぶようにすれば、ほんのちょっと便利。ｗ

出来上がったのはこんな感じのもの。

• GoogleMapsで利用する住所の文字列をURLエンコード

まぁ、このままだとアクセスするたびにデータが消えちゃうので、Cookieを使って残すとか、取得した値をそれぞれDBに入れるとかすれば使い勝手もいいのではないかと。
（ぼくは、実際にはJSは外部ファイルにして、MTの管理画面に読み込み＆住所用のカスタムフィールドを作って、そこで使っています。）

ご参考まで。

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！