.NET TIPS [ASP.NET AJAX]Googleマップを操作するには?[2.0、3.0、3.5、C#、VB]山田 祥寛2008/06/19 |
|
Googleマップとは、いわずと知れたGoogleが提供する地図サービスである。Ajax普及のきっかけともなったアプリケーションであり、Ajaxアプリケーションの例として紹介されることも多いことから、読者諸氏も(おそらくは)実際に触れたことがあるはずだ。
本稿では、このGoogleマップを、ASP.NET AJAXアプリケーションから操作する方法について紹介する。
●Google Maps APIについて
Google Maps APIは、名前のとおり、Googleマップを外部アプリケーションから利用するためのライブラリである。本稿では、このGoogle Maps APIを利用して、リストボックスから選択された地点の地図を表示するとともに、該当する
地点の詳細をバルーン表示するようなWebページを作成してみよう。
この際、地点情報の取得から地図の移動、バルーン表示までを、ASP.NET AJAXのブリッジ機能を使って実装するものとする。ブリッジ機能そのものに関する詳細は、「TIPS:Webサービス・ブリッジ機能により構造化データを受け渡しするには?(基本編)」などが詳しいので、こちらも併せてご参照いただきたい。次の画面は、実際にリストボックスから地点を選択し、その地点の地図と詳細情報を示すバルーンを表示しているところだ。
左のリストボックスから地点を選択する |
リストボックスで選択した地点の情報をバルーン表示 |
Google Maps APIを利用するには、あらかじめ本家サイトからアプリケーション識別のためのAPIキーを取得しておく必要がある。キー取得に際しては、Google Maps APIを利用するサイトのURL(例えば、「http://localhost:8080」など)を指定する必要がある。ここで指定したURLと実際にアプリケーションを動作するURLとが異なる場合、Google Maps APIは正しく動作しないので、要注意だ。
次の画面はAPIキーを取得している例である。
[利用規約に同意します]にチェックを入れ、 [ウェブサイトの URL]にGoogle Maps APIを利用するサイトのURLを指定、 最後に[APIキーを生成]ボタンをクリックする |
APIキーの取得例 |
[APIキーを生成]ボタンをクリックすると、APIキーとGoogleマップを表示するために最低限必要なコードが表示される(*1)。
取りあえずここでは、このコードの中から以下のような<script>タグの部分だけをどこかに控えておこう。src属性に記載されているのが、Google Maps APIを呼び出すためのURL(とライセンス・キー)となるものである。
|
|
Googleマップを表示するために最低限必要なコードの<script>タグの部分 |
*1 Googleアカウントでログインしていない場合には、ここでログインを求められるはずだ。もしもアカウントを所有していない場合には、新規にアカウントを作成する必要がある。 |
●サンプル・アプリケーション実装の手順
以上で、Google Maps APIを利用するための準備は完了だ。ここからは、サンプル・アプリケーションを実装するための手順を見ていくことにしよう。なお、本サンプル・プログラムを動作させるに当たっては、「DBプログラミング 7つのヒント − 同時実行制御からASP.NET AJAXまで −」の内容に従って、ASP.NET AJAXをインストールしておく必要がある(*2)。
*2 ただし、ASP.NET 3.5ではASP.NET AJAXは標準で搭載されているので、追加インストールは不要。 |
1. 地点情報テーブルを用意する
本稿のサンプルを動作させるには、あらかじめデータベース上に以下のようなMapinfoテーブルを作成しておく必要がある。
フィールド名 | データ型 | 概要 |
mid | INT | 地点コード(主キー) |
place | VARCHAR(50) | 地名 |
url | VARCHAR(255) | 詳細情報を表すURL |
longitude | FLOAT | 経度 |
latitude | FLOAT | 緯度 |
memo | VARCHAR(255) | 備考 |
Mapinfoテーブルのフィールド・レイアウト |
また、このMapInfoテーブルにはあらかじめ適当な地点情報を入力しておく必要がある。
2. 新規のXML Webサービス・クラスを定義する
ASP.NET AJAXのブリッジ機能においてサーバサイドの機能を提供するのは、.asmxファイル(=XML Webサービス・クラス)の役割だ。
ここでは、クライアントから送信された地点コード(midパラメータ)をキーにMapinfoテーブルを検索し、合致した地点情報をMapInfoオブジェクトとして返すXML Webサービス・クラス(GoogleMap.asmx)を定義してみよう。GoogleMap.asmxの具体的なコードは、以下のとおり。
|
||
地点コードをキーに対応する地点情報を検索するためのXML Webサービス・クラス(GoogleMap.asmx)(上:C#、下:VB) |
Webサービス・ブリッジ機能を利用するうえで必要な基本構文については、「TIPS:クライアントサイド・スクリプトからXML Webサービスを非同期呼び出しするには?(サーバサイド編)」が詳しいので、こちらを参照していただきたい。
3. 新規のWebフォームを作成する
新規のWebフォーム(GoogleMap.aspx)を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。また、それぞれのコントロールに対しては、表の内容でプロパティ値を設定しておこう。
Webフォーム(GoogleMap.aspx)のレイアウト | |||||||||||||||||||||||||||||
各コントロールのプロパティ内容は以下のとおり。 | |||||||||||||||||||||||||||||
|
ScriptManager.Scriptsプロパティには、Google Maps APIを動作するのに必要なライブラリのURLを指定する必要がある。ここでは、先ほどライセンス・キーを取得した際に保存しておいたURLを指定しておこう。なお、ライセンス・キーの部分は自分自身で取得したキーで置き換えること。
Panelコントロールは、Google Maps APIを通じて取得した地図画像を表示するための領域を確保するものだ。地図の大きさを変更したい場合には、PanelコントロールのWidth/Heightプロパティを変更すればよい。
4. サービス呼び出しのコードを記述する
あとは、ScriptManagerコントロールによって自動生成されたプロキシ・クラスを介して、サービス・メソッドを呼び出すJavaScriptのコードを記述するだけだ。具体的なコードは、以下のとおり。
|
|||||||
プロキシ・クラス経由でサービス・メソッドにアクセスするコード(GoogleMap.aspx) |
コードの大まかな流れは、リスト内のコメントも参照いただくとして、ここではJavaScriptからGoogleマップを操作する基本的なポイントを押さえておくことにしよう。
地図を表示する基本的な方法
地図を表示/操作するのは、GMap2オブジェクトの役割だ。GMap2コンストラクタには、地図の表示先となる要素(ここではPanelコントロール「gmap」)を指定する必要がある。
GMap2.addControlメソッドは、地図上に配置するナビゲーション・バーを追加する。ここでは、GLargeMapControl(地図移動+ズーム操作)、GMapTypeControl(地図切り替えの操作)オブジェクトを指定しているが、このほかにもGSmallZoomControl(ズーム操作)を指定することが可能である。
また、setCenter/setMapTypeメソッドは、それぞれ地図の表示位置(中心点)と、表示する地図の種類を指定するものだ。setCenterメソッドの第1パラメータには中心座標をGLatLngオブジェクト(引数は緯度、経度の順)として、第2パラメータには倍率を0〜17(0が最もズームアウトした状態、17が最もズームインした状態)の範囲で指定する必要がある。setMapTypeメソッドのパラメータには、ここではG_NORMAL_MAP(標準の地図)を指定しているが、ほかにもG_SATELLITE_MAP(衛星画像)、G_HYBRID_MAP(ハイブリッド地図)などが指定できる。
地図上のマーカを追加/削除する
本サンプルでは、サービス・メソッドGoogleMap.GetMapInfoで取得した地点情報に基づいて、地図上にマーカを追加している。
マーカを表すのは、GMarkerオブジェクトの役割だ。GMarkerコンストラクタには、引数として、マーカの座標情報を表すGLatLngオブジェクトを指定する必要がある。ここでは、GMap2.clearOverlaysメソッドでいったん地図上のマーカを破棄したうえで、addOverlayメソッドで新規に作成したマーカを追加している。ただし、このままではマーカが表示されないので(地図の表示位置が自動的にマーカ位置に移動するわけではないので)、setCenterメソッドで地図の表示位置をマーカ位置に移動させているわけだ。
マーカ・クリック時の挙動を定義する
最後に、マーカ・クリック時にメッセージ・バルーンを表示する方法を見ておこう。クリック時のイベント・ハンドラを定義するのは、GEvent.addListenerメソッドの役割だ。addListenerメソッドの一般的な構文は、以下のとおりだ。
GEvent.addListener(対象のオブジェクト, イベント名, イベント・ハンドラ) |
ここでは、マーカをクリック(click)したタイミングで、GMarker.openInfoWindowHtmlメソッドを呼び出すことで、その地点に対応する詳細情報(地点名と詳細ページへのリンク、メモ情報)をバルーン上に表示しているわけだ。openInfoWindowHtmlメソッドには、バルーンに表示するためのHTML文字列を引き渡すものとする(Sys.StringBuilderオブジェクトについては、「Microsoft AJAX Library&JavaScriptプログラミング 第5回」を参照していただきたい)。
以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、リストボックス上の地名を選択したタイミングで、地図の表示がその地点に移動し、かつ、地図上のマーカをクリックすると、バルーンが表示されれば成功だ。
利用可能バージョン:.NET Framework 2.0 利用可能バージョン:.NET Framework 3.0 利用可能バージョン:.NET Framework 3.5 カテゴリ:Webフォーム 処理対象:ASP.NET AJAX 関連TIPS:Webサービス・ブリッジ機能により構造化データを受け渡しするには?(基本編) 関連TIPS:クライアントサイド・スクリプトからXML Webサービスを非同期呼び出しするには?(サーバサイド編) 関連TIPS:クライアントサイド・スクリプトからXML Webサービスを非同期呼び出しするには?(クライアントサイド編) |
「.NET TIPS」 |
- 第2回 簡潔なコーディングのために (2017/7/26)
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために (2017/7/19)
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator (2017/7/18)
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|