第4回：WebブラウザとLZXの連携 - GoogleMapsを使用する (3/3)

TOP＞システム開発＞ WebブラウザとLZXの連携 - GoogleMapsを使用する（続き）

いまが旬！Ruby on Rails＆OpenLaszlo

第４回：WebブラウザとLZXの連携 - GoogleMapsを使用する
著者：ネットエイト十河学 2007/10/23

WebブラウザとLZXの連携 - GoogleMapsを使用する（続き）

最後にGoogleMapsのジオコーダー「GClientGeocoder」を利用し、入力された住所の位置に地図を移動してマーカーを追加してみます。index.rhtml内のjavascriptを次のように修正し、住所からマップを表示するための「setCenterByAddress」ファンクションを追加します。

laszlodemo/app/views/main/index.rhtml（一部）


		function load() {

		    if（GBrowserIsCompatible()) {

		      map = new GMap2(document.getElementById("map"));

		      map.addControl(new GLargeMapControl());

		      map.setCenter(new GLatLng(37.4419, -122.1419), 13);

		      

		      geocoder = new GClientGeocoder();

		    }

		  }

		  

		  //アドレスからマップを設定（lzxからコール）

		  function setCenterByAddress(address) {

		    if（geocoder) {

		      geocoder.getLatLng(

		        address,

		        function(point) {

		          if(point) {

		            map.setCenter(point, 13);

		            var marker = new GMarker(point);

		            map.addOverlay(marker);

		          marker.openInfoWindowHtml(address);

		          }

		        }

		      );

		    }

		}

次にLZXを修正し、グリッドが選択された時にこのファンクションを呼ぶように設定します。ここではrestgridのonselectイベント内で、JavaScriptを呼ぶためのLzBrowserのloadJS()メソッドを使用します。なお日本語に対応するため住所をエスケープしています。

main.lzx（一部）

（画像をクリックすると別ウィンドウに拡大図を表示します）

では「http://127.0.0.1:3000/main」をリロードしてください。このように表示され住所が入力された列を選択すると、入力された住所の位置にマップが移動しマーカーが追加されます。

図2：入力された住所の位置にマップが移動しマーカーが追加される
（画像をクリックすると別ウィンドウに拡大図を表示します）

まとめ

   早足でしたが、RoRとLZXを使ったRIA開発はいかがだったでしょうか。Webアプリケーションの開発はより表現力豊かに、より高速に開発することが求められるようになっています。RoRを使うことで高速にロジック層とデータ層を開発し、OpenLaszloを使うことでよりリッチで使いやすいユーザインターフェースを開発することができるようになるでしょう。

   またRoRのviewにLZXアプリケーションケーションを埋め込んで利用することで、GoogleMapsや既存のJavaScriptライブラリなどを利用しながらRIA開発を進めていくことができるでしょう。

   ぜひOpenLaszlo + RoRを利用して面白く、かつ役に立つRIAを開発し公開してください。OpenLaszloのコミュニティもありますのでわからない点があれば質問することもできます。またネットエイトがOpenLaszloのサポートを行っております。

OpenLaszloのコミュニティ
http://laszlo.jp
ネットエイト
http://www.net8.co.jp

この記事についてご意見やご感想がありましたらご気軽にメールをお送りください。togawamanabu@gmail.com

前のページ 1 2 3

著者プロフィール
株式会社ネットエイト十河学
2005年にOpenLaszloに出会う。RIAとオープンソースの可能性に感動し、OpenLaszloの情報交換を目的としたlaszlo.jpを勢いで開設。オープンソースアプリケーションはもちろん、iTunesやYouTubeから生まれるアーティストや、場所を問わないワークスタイルなどインターネットを中心として大きく変わりつつある世界の動きにも興味あり。現在はnet8のメンバーで沖縄県在住。

http://laszlo.jp

INDEX
第4回：WebブラウザとLZXの連携 - GoogleMapsを使用する
	RoRのviewにLZXアプリケーションケーションを埋め込む
	WebブラウザとLZXの連携 - GoogleMapsを使用する
	WebブラウザとLZXの連携 - GoogleMapsを使用する（続き）

いまが旬！Ruby on Rails＆OpenLaszlo
第1回	Ruby on RailsとOpenLaszloの連携
第2回	開発環境の構築と顧客管理アプリケーションの作成
第3回	Google Maps＋Ruby on Railsで連携したアプリケーションを作る
第4回	WebブラウザとLZXの連携 - GoogleMapsを使用する