C#(ASP.NET)でGoogle Mapを使おう
ASP.NETは.NET Frameworkが提供するWebアプリケーションやWebサービスを提供する仕組みです。.NET Frameworkですので、C#でも記述することが出来ます。Google MapはGoogle Maps APIというJava Scriptで記述するAjaxという仕組みを使って操作することができます。YWorks SoftwareではASP.NET2.0を使ってGoogle Maps APIを利用できるGoolge Map コントロールを提供しています。
Google MapコントロールをASP.NET2.0のaspxファイルに配置することでGoogle Maps APIを利用することができます。Google Mapコントロールの利用に当たってはGoogle MapのキーをGoogleより取得しておく必要がありますので、事前に取得して置いて下さい。取得したGoogle MapキーはコントロールのGoogleMapKeyに設定します。中心座標（世界測地系の緯度経度）の指定や中心マーカーの表示、地図のズーム、倍率変更コントロールや地図タイプ変更コントロールなどの初期表示設定についてはYWorksキーは必要ではありません。しかし、Google Mapの各種イベントをサーバ側のイベントとして受け取りたい場合にはYWorks SoftwareのYWorksキーをVectorより取得してコントロールのYWorksKeyプロパティに設定しておく必要があります。
サーバイベントはAjaxにより送受信します。Google Mapコントロールでは、Google MapのイベントリスナとなるJava ScriptをGoogle Mapの各イベントごとに登録しますが、そのJava Scriptの中でmapEventというオブジェクトを生成して、そのオブジェクトのsendメソッドを利用してクライアントからサーバへイベントを送信し、サーバ側でRaiseGoogleMapEventというイベントで受信します。サーバ側からはサーバ処理に応じてGoogle MapコントロールのSendJavaScriptというメソッドを使ってクライアントにGoogle Mapを操作するためのJava Script（Google Maps API）を送信することでGoogle Mapを操作します。
下記にGoogle Mapコントロールの使用例を示します。下記のコードはcsファイルの内容ですが、Google MapキーとYWorksキーおよびコントロールのWidthとHeightについてはaspxファイルにてプロパティ設定してあります（コードで設定することも可能です）。
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using YGoogleMap;
namespace GoogleMapSample
{
public partial class GoogleMapSample : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//
// Google Map コントロールの初期設定
//
//コントロールの表示設定
ctlMap.UseLargeMapControl = true; //Large Map Control を使用
ctlMap.UseMapTypeControl = true; //Map Type Control を使用
ctlMap.UseScaleControl = true; //Scale Control を使用
ctlMap.UseOverviewMapControl = true; //Overview Map Controlを使用
ctlMap.SetOverviewMapControlSize(200, 200); //Overview Map Controlのサイズ（px)
//表示位置と倍率の設定
ctlMap.SetCenter(35.466225, 139.622618); //地図の中心の緯度経度を設定（世界測地系）
ctlMap.Zoom = 16; //地図のズームを設定
//各種スクリプトの設定
//各種スクリプト設定はYWorksキーが設定されている場合のみ有効です。
ctlMap.MapUserFunctionsScript = this.GetUserFunctions(); //GoogleMapコントロール用のユーザ関数群の設定
ctlMap.MapStartScript = this.GetMapStartScript(); //GoogleMapコントロール初期化直後のスクリプトの設定
ctlMap.MoveEndListenerScript = this.GetMapMoveEndScript(); //GoogleMapコントロールのmoveendイベントのスクリプトの設定
ctlMap.ZoomEndListenerScript = this.GetMapZoomEndScript(); //GoogleMapコントロールのzoomendイベントのスクリプトの設定
}
#region 各種スクリプト
//Google Mapコントロールで使用するユーザ関数をJavaScriptで記述します。
private string GetUserFunctions()
{
return "function hello(){window.alert('Hello World!');}";
}
//Google Mapコントロール初期化直後のJavaScriptを記述します。
private string GetMapStartScript()
{
return "hello();";
}
//Google MapコントロールのmoveendイベントのJavaScriptを記述します。
//"function(){・・・}"を返します。
//function内でmapEventオブジェクトのsendを呼び出してサーバイベントを発生させます。
private string GetMapMoveEndScript()
{
string script = "function(){";
script += "var ev = new mapEvent('move_end');";
script += "ev.addArg(" + ctlMap.MapID + ".getCenter().x);";
script += "ev.addArg(" + ctlMap.MapID + ".getCenter().y);";
script += "ev.send();";
script += "}";
return script;
}
//Google MapコントロールのzoomendイベントのJavaScriptを記述します。
//"function(oldZ, newZ){・・・}"を返します。
//function内でmapEventオブジェクトを使ってサーバイベントを発生させます。
private string GetMapZoomEndScript()
{
string script = "function(oldZ, newZ){";
script += "var ev = new mapEvent('zoom_end');";
script += "ev.addArg(oldZ);";
script += "ev.addArg(newZ);";
script += "ev.send();";
script += "}";
return script;
}
#endregion
#region サーバイベント応答
//Google Mapコントロールのサーバイベントの応答
protected void ctlMap_RaiseGoogleMapEvent(string eventName, string[] args)
{
if (eventName == "move_end") //地図の移動
{
this.MoveEnd(args);
}
else if (eventName == "zoom_end") //倍率の変更
{
this.ZoomEnd(args);
}
}
//地図の移動時の応答
//メソッド内でSendJavaScriptメソッドを使ってJavaScriptを送信します。
private void MoveEnd(string[] args)
{
// alertの表示
string script = "window.alert('Server Event : Move End";
script += @"\nlat : " + args[0] + @"\nlng : " + args[1] + "');";
ctlMap.SendJavaScript(script);
//markerの表示
script = ctlMap.MapID + ".clearOverlays();";
script += "marker = new GMarker(new GPoint(" + args[0] + ", " + args[1] + "));";
script += ctlMap.MapID + ".addOverlay(marker);";
ctlMap.SendJavaScript(script);
}
//地図の倍率変更時の応答
//メソッド内でSendJavaScriptメソッドを使ってJavaScriptを送信します。
private void ZoomEnd(string[] args)
{
// alertの表示
string script = "window.alert('Server Event : Zoom End";
script += @"\nOld Zoom : " + args[0] + @"\nNew Zoom : " + args[1] + "');";
ctlMap.SendJavaScript(script);
}
#endregion
}
}
上記のコードにおいては
１．Google Mapの表示直後に「Hello World!」メッセージを表示
２．地図移動時にメッセージ表示とマーカー表示（サーバイベント）
３．地図倍率変更時にメッセージ表示（サーバイベント）
も動作させています。
