アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:ライブラリー

2009年7月29日

JavaScriptでGoogleMapsの地図用URLを表示する

夢実現のアファメーションを実践する起業家にもっとも読まれているブログは?

とりあえずGoogleMapsの地図URLにリンクをはる。

ウェブサイトを作るときや、何らかのサービスを作るときに、無料で高精細な地図を表示でき、さまざまな場面で利用されている「GoogleMaps」。
(利用規約はありますが。)

APIを利用することで、地図の埋め込みや独自の情報の付加、A地点からB地点までのルート表示などいろんなことが比較的簡単にできるけど、そういった機能を使うにはGoogleのアカウント(API Key)を取得してカスタマイズしなくてはならない。

でも、とりあえずある場所の地図を表示する「マップのURL」を取得する場合、APIを使わなくても簡単にできる。

JavaScriptでURLエンコード。

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

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

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

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

こちら↑にある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を突っ込んで飛ぶようにすれば、ほんのちょっと便利。w

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

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

ご参考まで。

この記事に関連する(かもしれない)書籍

 

投稿者 kuro : 2009年7月29日 16:25 | ID:388

ページトップ△

トラックバック

このエントリーのトラックバックURL:
http://www.dokuritsu-kigyo.net/cgi-bin/mt/mt-tb.cgi/388

コメント

ページトップ△