地図とオンラインOSの関係（後編）：Windows Liveが魅せる次世代マッシュアップ（5/5 ページ）

» 2007年02月22日 08時00分 公開
[大澤文孝，ITmedia]
前のページへ 1|2|3|4|5 　　　　　　

　ここでの例は、「Live Contacts Control」と「Virtual Earth Control」を組み合わせて連絡先を地図上に表示する例を示したが、ほかにも、地図情報を使ったWebアプリケーションは、さまざまなものが考えられるだろう。

　例えば、得意先の場所を地図に表示する、配送物が現在どこにあるのかを表示する、といった具合だ。そのような場合でも、「緯度／経度」または「住所など特定する情報」が分かれば、その位置にプッシュピンを付けるのは容易だ。

　なお、今回は紹介できなかったが、Virtual Earth Controlでは、プッシュピンだけでなく線や多角形を描くこともできる。もちろん、航空地図や、Virtual Earthで人気の高い「3D表示」も、コードから制御できるのだ。

　いかなる場合でも、コントロールとして実装されている以上、その操作はJavaScriptから行えばよく、それほど難しいことではない。

　“マッシュアップとは、コーディングの技量ではなくて、アイデア次第ともいえるだろう”。

画面9■リスト5の実行結果
リスト5■Live Contacts ControlとVirtual Earth Controlを組み合わせた例

<!-- 名前空間を設定する -->
<html xmlns:devlive="http://dev.live.com">
<head>
  <title>連絡先の地図検索</title>
  <!-- Virtual Earth Controlのソースの読み込み -->
  <script language="JavaScript"
    src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js">
  </script>
  <!-- Live Contactsのソースの読み込み -->
  <script language="JavaScript"
    src="http://dev.live.com/scripts/base/v0.2/live.js">
  </script>
  <script language="JavaScript"
    src="http://dev.live.com/scripts/contacts/v0.2/control.js">
  </script>
  <script language="JavaScript">
    <!-- 地図の初期化 -->
    var map = null;
    function InitMap()
    {
      map = new VEMap('mapArea');
      map.LoadMap();
      var lat = new VELatLong(35.6811, 139.76709);
        map.SetCenterAndZoom(lat, 13);
    }
    <!-- 検索対象が見つかったときのコールバック関数 -->
    function onFind(results)
    {
      // プッシュピンとして表示
      var pin = new VEPushpin(
        results[0].ID, results[0].LatLong, 
        'http://www.itmedia.co.jp/favicon.ico', 
        '友人');
      map.AddPushpin(pin);
    }
    <!-- 連絡先データを受信する -->
    function onData(p_contacts)
    {
      // 送信された連絡先の数
      var recvlength = p_contacts.length;
      // プッシュピンクリア
      map.Clear();
      // ループして展開
     for (var i = 0; i < recvlength; i++)
     {
        var username = p_contacts[i].name;
        var state = p_contacts[i].personalState;
        var city = p_contacts[i].personalCity;
        var street = p_contacts[i].personalStreet;
        // 地図の検索
        map.FindLocation(state+city+street, onFind);
    }
  }
  </script>
</head>
<body onLoad="InitMap();">
<h1>連絡先の地図検索</h1>
<div id="mapArea"
  style="width:320px; height:320px;float:left;">
</div>
<devlive:contactscontrol
  style="width:180px; height=240px;float:right;"
  devlive:privacyStatementURL= 
    "http://example.com/privacy.htm"
  devlive:channelEndpointURL=
    "http://example.com/channel.htm"
  devlive:dataDesired=
    "name,personalState,personalCity,personalStreet"
  devlive:market="jp"
  devlive:onData="onData">
</devlive:contactscontrol>
</body>
</html>
前のページへ 1|2|3|4|5 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ