ASP.NETサイトにGoogle Mapsの地図を表示する（4）

前回の記事で、Google Mapsの地図をASP.NETのWebサイトに単純に表示させるところまでをやってみました。今回は応用編で、Webページで指定した固有の場所の地図を出したり、動的に地図を出すか出さないか決める、といったことをやってみましょう。

前回の記事では、地図を表示させる際に、緯度と経度をぼかしていました。普通は、ここに目的の場所の座標を入れて、地図を表示させます。ただ問題は、JavaScriptのコードに、どうやって情報を渡せばよいか、ということでしょうか。

これにはいろいろな方法があります。地図を表示させるだけのJavaScript関数を用意して、それをHTMLコントロールのクリックなどで発生するイベントで呼び出す方法、HTMLコントロールに情報を書いておき、DOMを使って読み出す方法、などです。ただし前者の方法はページロード時に地図を出すには難しく、後者は書いた情報が目に付いたり、余計なHTMLコントロールを置かねばならないなどあまりスマートではありません。

そこで、一般的に用いられているのがWebサービスを用いるというものです。さっそくやってみましょう。まず、Webサービスを提供するファイルservice.asmxを作成します。

<%@ WebService Language="C#" Class="Map" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class Map: System.Web.Services.WebService {

[WebMethod]
public Info GetInfo(string arg) {
      // argを渡すとInfoオブジェクトを返すというメソッドです。
      Info info = new Info();
      // データを取得する処理をここに書きます。
      return info;
}
}

public class Info
{
public Double AxisX;
public Double AxisY;
}

GetInfoは、適当な文字列を渡すと、それに応じてInfoオブジェクトを返すというWebサービスのメソッドです。Infoオブジェクトには、argに対応した適切な座標をメンバーに格納するものとします。通常は、データベースを検索したりして、目的の座標を取得して返す処理を入れます。

ScriptManagerProxyコンポーネントの<Services>要素に、上のWebサービスファイルを登録します。

<asp:ScriptManagerProxy id="smp" runat="server">
<scripts>
<asp:ScriptReference Path="http://maps.google.com/maps?file=api&v=2&key=キー"></asp:ScriptReference>
</scripts>
<Services>
<asp:ServiceReference Path="~service.asmx" />
</Services>
</asp:ScriptManagerProxy>

あとは、実際にWebサービスを呼び出すコードを書くだけです。前日のコードを、ちょっと書き換えて、Webサービスを呼び出すように変更します。

init = function init2() {
      if (GBrowserIsCompatible()) {
         if ($get(‘maps’) != null) {
            map = new GMap2($get(‘maps’));
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.clearOverlays();
            Map.GetInfo(文字列,
                  function(result) {
                     var pnt = new GLatLng(result.AxisX, result.AxisY);
                     var mrk = new GMarker(pnt);
                     map.addOverlay(mrk);
                     map.setCenter(pnt, 12);
                     map.setMapType(G_NORMAL_MAP);
                     var msg = "文字列";
                     GEvent.addListener(mrk, ‘click’,
                        function() { mrk.openInfoWindowHtml(msg); }
                     );
                  }
            )
         }
      }
}

これでバッチリです。Webサービスにしておいたことで、融通が利くようになります。いったん地図を表示させたあとでも、ページの操作で異なる場所の地図を表示させるようにした利が簡単にできるでしょう。

ちなみに、このコードで、地図表示用の<div>要素がある場合のみ、といった対応もできています。$get()は、IDから要素への参照を取得するDOM関数で、MS Ajax Libraryの1関数です。

こういったものを使いこなせば、複雑な処理も簡単に書けるのが面白いですね。

では、Google Mapsの地図を表示させる、という企画は終わりです。実際の組み込み状況は、ここを見てみて下さい。

ASP.NETサイトにGoogle Mapsの地図を表示する（4）

いいね:

コメント