twicliのGeoLocation対応

Twitter JavaScript

twicliをTwitterのGeolocationに対応させました。


GeoLocationは、tweetに対して位置情報(緯度,経度)を埋め込むもの。発言時の現在位置を付加するほか、地震速報では震源位置を配信するなどの用途で使われています。


オリジナルは@_wa_ さんの下記プラグインです。
http://twitter.com/_wa_/statuses/18914414292
twicli の位置情報表示プラグインを作ったらなんと!: 「わ」の日記もどき


こちらから、twicli本体にGeoLocationが付加されたtweetを受信した際、下記のようにマーカを表示する機能を取り込みました(なおオリジナルのプラグインでは加えて座標も表示していましたが、長くなることがあるので省略しました)。マーカはGoogle Mapの当該位置へのリンクになっています。


加えて、twicliに「geomap.js」というプラグインを追加することで、マーカをクリックした際にGoogle Mapをインライン表示するようにしました。(デフォルトで追加されます。)


なおgeomap.jsを追加すると、自動的に起動時にGoogleMap API (v3)もロードされます。回線が遅い場合などで不要な時はgeomap.jsを外すと少し起動時間が減ります。


位置情報の送信については、次のエントリ(id:NeoCat:20100730:1280437892)で。

Google Map API v3を使ってみる

JavaScript

twicliのgeomap.jsプラグインで、GoogleMapの埋め込み表示に使っているスクリプトの中身。
といってもGoogle Map APIを呼んでるだけで至極簡単ですが。


まずGoogle Map API (v3)を読み込む。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

sensor=false となっているのは、クライアント機器の位置情報センサ（GPS、WLANなど）を使用しない、という意味です。sensor=true とすると、対応機器では位置情報取得が行えるようになります。


DIV要素(id指定あり)を用意し、その中に地図を表示する。latが緯度、lngが経度になります。

<div id="map_canvas" style="width: 100%; height: 300px"></div>

<script>
		var lat = 35.00, lng = 135.00;
		var latlng = new google.maps.LatLng(lat, lng);
		var map = new google.maps.Map(document.getElementById("map_canvas"), {
			zoom: 13,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});

zoomは縮尺(数値が大きいほど詳細)、mapTypeIdは地図の種類で、ROADMAP(道路地図)のほか、SATELLITE(衛星写真)、HYBRID(地図+衛星写真)、TERRAIN(地形図) が使えます。

ついでに指定した座標にマーカを表示してみる。(scriptの続き)

		var marker = new google.maps.Marker({
			position: latlng,
			map: map
		});
</script>

なお引数ハッシュのmapには上記で作った地図を指すローカル変数を指定しています。


これだけで以下のような地図が表示されます。

簡単ですね。

参考サイト

Google Maps API Version3 チュートリアル - Google Maps API Version3 日本語ドキュメント(非公式)
http://code.google.com/intl/ja/apis/maps/documentation/javascript/