Google Map上に線を描画する方法

今回はGoogle Map上に線を引く方法を解説する。

実際に動いているものは下記を参照して欲しい。
http://www.my-clip.net/Clip/Details/38

var lineColor = "#0000af";
var lineWeight = 3;
var lineOpacity = .8;
var points = [];
for (i = 0; i < markers.length; i++) {
var point = new GLatLng(markers[i].Latitude, markers[i].Longitude);
var marker = new GMarker(point)
marker.description = markers[i].Description;
map.addOverlay(marker);
GEvent.addListener(marker, &quot;click&quot;, function() {
openInfoWindow(this, this.description);
});
points.push(point);
}

var polyLine = new GPolyline(points, lineColor, lineWeight, lineOpacity);
map.addOverlay(polyLine);
}

上記のコードを見てもらえば分かるように地図上に線を描画するのは至極簡単だ。描画したい線の座標を順番にGLatLngの配列へと設定し、GPolylineのコンストラクタへ渡すだけで良い。

Google maps APIのGClientGeocoderの使い方

今回はGoogle maps APIのGClientGeocoderの使い方を解説する。GClientGeocoderはクライアントスクリプトから直接Googleの膨大な地図情報にアクセスできるという大変便利なクラスだ。

呼び出し方法は下記のようになる。

var geocoder = new GClientGeocoder();
var center = map.getCenter();
geocoder.getLocations(
 center, 
 function(response) {
  if (!response || response.Status.code != 200) {
   alert("データが取得できませんでした");
  }
  else {
   var place = response.Placemark[0];
   var point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); 
   // Code here...
   var address =  place.AddressDetails.Country.AddressLine[0];
   // Retrieve address for whatever you want to...
  }
});

getLocationsのオーバーロードとして、文字列の住所を受け取るものと、GLatLngを受け取るものと両方あるので用途に分けて使用して欲しい。

getLocationsで返却されるresponseの中身であるJSONクラスは下記になる（このページより抜粋）。

{
  "name": "1600 Amphitheatre Parkway, Mountain View, CA, USA",
  "Status": {
    "code": 200,
    "request": "geocode"
  },
  "Placemark": [
    {
      "address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
      "AddressDetails": {
        "Country": {
          "CountryNameCode": "US",
          "AdministrativeArea": {
            "AdministrativeAreaName": "CA",
            "SubAdministrativeArea": {
              "SubAdministrativeAreaName": "Santa Clara",
              "Locality": {
                "LocalityName": "Mountain View",
                "Thoroughfare": {
                  "ThoroughfareName": "1600 Amphitheatre Pkwy"
                },
                "PostalCode": {
                  "PostalCodeNumber": "94043"
                }
              }
            }
          }
        },
        "Accuracy": 8
      },
      "Point": {
        "coordinates": [-122.083739, 37.423021, 0]
      }
    }
  ]
}

GClientGeocoderが独自のCacheメカニズムを実装しているので同じアドレスであればServerへのRound tripは発生しない。しかし、複数のアドレスを問い合わせるためにGClientGeocoderをループ内で複数回使用することは推奨されていないので、その場合はサーバ側などでHTTP Geocoderを使用するのがよいだろう。

Google mapsをブラウザ幅にあわせて伸縮させる方法

Google codeにあるGoogle mapsのサンプルそのままでは、地図をブラウザ幅にあわせて伸縮させた際にJavaScriptの解析エラーが出てしまう。今回はその対処方法を紹介する。

サンプルのコードは以下。

if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map_canvas"));
 map.setCenter(new GLatLng(37.4419, -122.1419), 13);
 map.setUIToDefault();
}

ちなみにエラーの理由はsetUIToDefault()にあるようなので、それをのけて下記のように手動で設定すればよい。

if (GBrowserIsCompatible()) {
 var  map = new GMap2(document.getElementById("map_canvas"));
 map.enableContinuousZoom();
 var ui = new GMapUIOptions();
 ui.maptypes = { normal: true, physical: true, satellite: true, hybrid: true };
 ui.zoom = { doubleclick: true, scrollwheel: true };
 ui.controls = { largemapcontrol3d: false, smallzoomcontrol3d: true, scalecontrol : true, maptypecontrol: false, menumaptypecontrol : true };
 map.setUI(ui);
}

ここでは、ダブルクリックでのズームアニメーションの有効化（enableContinuousZoom()）、表示するマップ種類の設定（maptypes）、UI操作での地図ズーミングの設定（zoom）、地図上に表示するUIコントロールの設定（controls）などを行っているので参考にして欲しい。もちろん言うまでも無いことだが詳細情報はAPI Referenceを参照してほしい。

Googleストリートビューの実装方法

下記の画像のようにMyClipにGoogleストリートビューの機能を盛り込んだので、その開発手順をここで紹介する。動作確認は実際にMyClip上で行って欲しい。今回の記事はストリートビューを使うにあたってすでにGoogle Maps APIのGMap2クラスに多少なりとも親しんでいるものとして話を進める。
APIの詳細はGoogle Maps API Referenceを参照してほしい。



-概要-
クリックされた地図上のストリートビューのデータ取得のためにGStreetviewPanorama.getNearestPanorama()を使用する。その際に問題になるのがクリックされた場所。そこが道路上ならば問題ないけれど建物上であればgetNearestPanorama()でデータを取得することができない。それなのでまず最初にGDirections.loadFromWaypoints()で最寄の道路座標データを取得する。

以下のコードは必要なところだけを抜き出した簡易版なので、手順だけでも大まかに掴んでもらえたらと思う。
(MyClip上ではストリートビュー関連の処理をクラスとしてまとめてあるので、thisはそのクラスを表すもの)

//マップの準備
this._map = new GMap2(
  document.getElementById("map"));
this._map.setUIToDefault();
this._map.setCenter(
  new GLatLng(lat, lng), 17);

//ビューの地図上の場所を表すアイコンの準備
this._guyIcon = new GIcon(G_DEFAULT_ICON);
this._guyIcon.image = 
  "http://maps.gstatic.com/mapfiles/cb/man_arrow-0.png";
this._guyIcon.transparent = 
  "http://maps.gstatic.com/mapfiles/cb/man-pick.png";
this._guyIcon.imageMap = [
  26, 13, 30, 14, 32, 28, 27, 28, 
  28, 36, 18, 35, 18, 27, 16, 26,
  16, 20, 16, 14, 19, 13, 22, 8];
this._guyIcon.iconSize = new GSize(49, 52);
this._guyIcon.iconAnchor = new GPoint(25, 35);

//ストリートビューのレイヤーをマップ上に載せる
this._svOverlay = new GStreetviewOverlay();
this._map.addOverlay(this._svOverlay);

//ストリートビューを準備
this._streetViewClient = new GStreetviewClient();
this._streetViewer = new GStreetviewPanorama(
  document.getElementById("stview"));

//最寄の道路座標を取得の準備
//loadFromWaypointsは非同期でデータ取得を行うので、callbackメソッドを設定する必要がある。ここではGEventにGDirectionsのloadイベントを登録している
this._direction = new GDirections();
GEvent.addListener(
 this._direction, "load", function() {
  //これで最寄のデータ取得完了
  var p = this._direction.getPolyline().getVertex(0);　
  var mystv = this;

  // 取得した道路上のストリートビューデータを取得
  this._streetViewClient.getNearestPanorama(p, 
   function(panoData) { mystv._showPanoData(panoData); });
});

// getNearestPanorama()のcallbackメソッド
_showPanoData: function (panoData) {
 this._streetViewer.setLocationAndPOV(
   panoData.location.latlng);
 if (!this._guyMarker) {
  this._guyMarker = 
   new GMarker(panoData.location.latlng, 
    { icon: this._guyIcon, draggable: true });
  this._map.addOverlay(this._guyMarker);
  var mystv = this;
  GEvent.addListener(this._guyMarker, "dragend", 
   function() { mystv._onDragEnd(); });
 }
 else {
  this._guyMarker.setLatLng(panoData.location.latlng);
 }
}

// 地図上の人型アイコンのドラッグ終了イベントハンドラ
_onDragEnd: function() {
 var latlng = this._guyMarker.getLatLng();
 this._direction.loadFromWaypoints(
  [latlng.toUrlValue(6), latlng.toUrlValue(6)], 
  { getPolyline:  true });
}

これで地図上にストリートビューのレイヤーと人型アイコンが表示され、人型アイコンをドラッグ＆ドロップすれば最寄の道路上のストリートビューが表示される。

このほかにもGStreetviewPanoramaのinitialized, yawchangedイベントを実装すれば、ストリートビュー上のユーザーアクションが拾える。そうすれば地図からストリートビュー、またその逆へ、という双方向な挙動が実現できるのでよりユーザーフレンドリーな地図サービスが提供できる。デモを漁れば前述のイベント処理を実装したサンプルが見つかるので興味がある方はそちらへ。