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

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 : 16:25 | 固定リンク | コメント (0) | トラックバック(0) | ID:388

ページトップ△

2009年7月 1日

MTOSを使い倒すっ!

成功者になるための必読ブログとは?

MTOSにカスタムフィールドを。

表題のとおり、いまMTOS(MovableType Open Source)のカスタマイズをしています。

とりあえずフロント部分はおいておいて、独自のプラグインを作って
MTOSにカスタムフィールド的なものをつけて、独自タグが使えるようにする…という力技。
(っつっても、Perlとか分からないので、本を買ってきて見よう見まねだけどねw)

※通常版のMT4を使えば「カスタムフィールド」はデフォルトで使えるんだけど、
今回は一切お金をかけられないので、MTOSじゃないとダメなんっす。
(WordPressって選択肢もあるけど、使ったことがないし、よくわからないので。汗)

MTOSの管理画面のカスタマイズ時の備忘録。

んで、やっている過程で一個ひっかかったところ。

エントリーの管理画面にフィールドを表示させるためには、
「edit_entry.tmpl」とかに

<mtapp:setting
id="フィールド名"
label="ラベル名"
label_class="ラベルの表示位置">
表示するフィールド(<input>とか<textarea>~</textarea>)
</mtapp:setting>

っていう設定を書く。

んで、<mtapp:setting>~</mtapp:setting>の中は
自動的に複数のタグ(divとか)が挿入されて、管理画面にフィールドが挿入される。

んで、たとえば特定のフィールドに対する説明文とかをpタグとかで表示させたいと思って、
<mtapp:setting>~</mtapp:setting>の間にpタグとかを入れると、
その中身がtextareaの場合、本来自動的に挿入されるdivタグの一部がなぜか入らなくて、
タグの入れ子構造が崩れてしまい、結果として表示が崩れてしまう。
(中身がinputの場合は大丈夫だった。)

具体的な例:

<div class="textarea-wrapper"><textarea>~</textarea></div>
<p>テキストエリアの説明</p>

とコードが吐き出されるはずなのに、なぜか

<textarea>~</textarea></div>
<p>テキストエリアの説明</p>

と、divの開始タグがない状態になってしまう。(理由は不明)

回避方法は…<mtapp:setting>~</mtapp:setting>の間によけいなものは入れない。
(ぜんぜん“回避”じゃない。)

もしくは、<mtapp:setting>を使わないで、直接edit_entry.tmplに
テキストフィールドを書き込む。(こっちのほうがデザインとかカスタマイズしやすいかも。)

文系だってできるんだっ!

元来プログラムとか苦手…ウソです。

“苦手”じゃなくて“できない”だった。(VIVA!文系っ!!)

でも、自分が作ったフィールドが管理画面に表示されて、さらにそこに入力した値が
ページとかデータに反映されると…なんか楽しい。(完全にオタクの領域)

今は特定の機能をただ追加するだけだけど、
汎用的なプラグインとか開発できたら楽しいだろうなー。

…って、こんなマニアックなことは、普通に仕事してたら
あまりやる機会はないだろうけどねー。

とりあえず、日々ワクワクしながら生きていますっていう報告と、
制作過程の備忘録なんだにゃー。

アファメーション

「今やっている作業は、9月に公開するっ!」

 

投稿者 kuro : 03:56 | 固定リンク | コメント (0) | トラックバック(0) | ID:368

ページトップ△