Google Maps API V3 と JapaScript (not JavaScript!)

Google Maps API V3

Google Maps API V3 がリリースされて結構経ったが、そろそろ必要になりそうなのでライブラリ化を考える。V3 では API Key が不要になったので、ライブラリ化してしまえば誰にでも簡単に利用できるようになった。これまでサイトごとに API Key を取得して、そのうえ localhost 分まで取得していた開発者にとっては嬉しい限り。

今回この V3 API を利用して簡単な地図表示ライブラリを作ろうと企んだ訳だけど、途中から意識が無くなり、気が付いたら残念で素敵なコードが出来上がっていたので書き残す事に決めた。

まさかの始まり

おそらく自分が作ったであろうソースを確認してみると、ライブラリの先頭でオブジェクトの有無を確認していた。

var xωx = xωx || false;

泣けてくる。まさかの２バイト文字。コード全体に渡ってメソッド名まで日本語で定義されている。そうか、これが日本語プログラミング！・・・・

実際に地図を表示する

実際に地図を表示するコード(ちなみにJavaScript)は、かなり楽だ。

(xωx).表示要素のID('表示要素のID')
      .住所で表示('千代田区丸の内1−9−1')
      .マップの表示();

以上。
簡単なので、これならプログラムが出来ない人でも使えるような気がする。特に『.住所で表示』に渡す住所は、具体的な住所だけでなく次のような指定も可能だ。

また、マーカーや吹き出しを追加したい場合は次のようにする。

(xωx).表示要素のID('表示要素のID')
      .住所で表示('八重洲中央口')
      .マーカー追加('東京駅',               'ここは東京駅')
      .マーカー追加('35.6815 139.7711',     '八重洲ターミナルホテル')
      .フキダシ追加('八重洲ブックセンター', 'oazoに削られてます')
      .マップの表示();

簡単じゃないか。先ほど自分を殴りたいと言っていたのは撤回しよう。マーカーや吹き出しの追加は、('住所か名称か座標', '説明')として指定するようだ。

JapaScript

UTF-8 を利用しての日本語プログラム。まさかの楽しさ。
そしてここに誕生したのだった。

JavaScript + 日本語 = JapaScript !

あほか。

他にも指定できる事があるようなので、以下、気を失いながらスピリチュアルエンジニアリングにより書かれたコードを追ってみる。

全体のコード概要

if (!xωx) {

    xωx = (function(){

        // private member

        // public method

        // private method

    })();

}

ちくしょう。追うのをやめた。
ソースのダウンロードと、組込サンプルをとりあえず載せる。

ダウンロード

http://github.com/poppo/binary_life/blob/master/x__x.js　　（なんでファイル名がxωxじゃないのか、じぶんよ

組込

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="x__x.js" charset="UTF-8"></script>

<script type="text/javascript"><!--

(xωx).表示要素のID('map_area')
      .住所で表示('八重洲中央口')
      .ズームレベル(15)
      .マップの種類('航空写真')
      .マップ表示();

//--></script>

</head>
<body>
<div id="map_area" style="width:600px;height:500px;"></div>
</body>
</html>

こんな感じだな。

メソッド

幾つかあるメソッドを確認してみる。

.表示要素のID()

これは地図を表示するHTML上の要素IDを指定するもののようだ。
例) .表示要素のID('map_area')

.住所で表示()

表示したい地図の場所を、住所もしくは名称で指定するらしい。
例) .住所で表示('富士山')

.緯度()

住所でなく、座標で地図を表示したい場合の緯度を指定する。
※経度も一緒に指定する必要がある。
例) .緯度('35.6808')

.経度()

住所でなく、座標で地図を表示したい場合の経度を指定する。
※緯度も一緒に指定する必要がある。
例) .経度('139.7673')

.ズームレベル()

地図のズームレベルを0〜19の数値の範囲で指定するらしい（大きい程拡大）
例) .ズームレベル(15)

.マップの種類()

航空写真とか、ハイブリッドとかの地図の種類を指定する。
地図、航空写真、ハイブリッド、地形の４種類が指定出来る。
例) .マップの種類('ハイブリッド')

.マーカー追加()

地図上にマーカーを追加する。
.マーカー追加('住所か名称か座標', '説明') という形で使うらしい。
例) .マーカー追加('35.6815 139.7711', '八重洲ターミナルホテル')
例) .マーカー追加('丸の内オアゾ', 'ブックセンター削ってます')

.フキダシ追加()

吹き出しを追加する。マーカー追加とほぼ同じ。

.ラインを引く()

地図上に線を引く事が出来る。道案内とかに使えそう。
座標の配列でパスを指定していくらしい。
例) .ラインを引く('35.6916 139.7708', '35.6807 139.7672', '35.6749 139.7632')

.ラインの色()

地図上に表示したラインの色を指定する。日本語の色で指定しちゃう！
例) .ラインの色('青')

プライベートメンバに

// カラーマスタ
,_color_mst {
     青 : '#00f'
    ,赤 : '#f00'
    ,緑 : '#0f0'
 }

ってあるので、ここに好きな日本語の色名を追加していけば、増やせるみたい。
そう、例えば「勝利に酔う土佐犬 : '#CE8050'」みたいな。

.マップを表示()

色々指定したら、最後にこれを読んで地図を表示する締めの一言。

さいごに

ソースが粗すぎるので改良の余地あり。吹き出しのサイズを固定にしたりしてるし。
そして、ごめん自分。ちゃんとしたの別に作るわ。