ホーム - C#でGoogle Maps API

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
    }
}

				


上記のコードにおいては
1.Google Mapの表示直後に「Hello World!」メッセージを表示
2.地図移動時にメッセージ表示とマーカー表示(サーバイベント)
3.地図倍率変更時にメッセージ表示(サーバイベント)
も動作させています。