マルティスープ
Staff Blog

2016.08.25

Googleマップで過去の航空写真を見る

みなさん、こんにちは。

国土地理院が提供するタイル地図とGoogleマップの連携方法を説明します。

今回は、Googleマップに国土地理院が公開している航空写真を設定して表示してみます。

国土地理院が公開しているタイル地図の一覧は、下記サイトで確認できます。

http://maps.gsi.go.jp/development/ichiran.html

様々なタイル地図が公開されていますね。今回は以下の航空写真を参照できるようにしてみました。

早速デモサイトをご覧ください。左上に地図を切り替えるメニューがあるので、クリックすると一覧が表示されます。デフォルトで表示される「航空写真」は、Googleマップ標準のものです。

なお、ズームレベルによっては写真が無い場合がありますので、ご了承ください。

詳しいコーディング方法です。
タイル画像の表示には、「google.maps.ImageMapType」 を使用します。

// 国土地理院タイル画像の情報
var _chiriinMapList = [
  {name: '空中写真(1945-1950)', key: 'USA10', url: 'http://cyberjapandata.gsi.go.jp/xyz/ort_USA10/', type: 'png'},
  {name: '空中写真(1961-1964)', key: 'old10', url: 'http://cyberjapandata.gsi.go.jp/xyz/ort_old10/', type: 'png'},
  {name: '空中写真(1974-1978)', key: 'gazo1', url: 'http://cyberjapandata.gsi.go.jp/xyz/gazo1/', type: 'jpg'},
  {name: '空中写真(1979-1983)', key: 'gazo2', url: 'http://cyberjapandata.gsi.go.jp/xyz/gazo2/', type: 'jpg'},
  {name: '空中写真(1984-1986)', key: 'gazo3', url: 'http://cyberjapandata.gsi.go.jp/xyz/gazo3/', type: 'jpg'},
  {name: '空中写真(1988-1990)', key: 'gazo4', url: 'http://cyberjapandata.gsi.go.jp/xyz/gazo4/', type: 'jpg'},
  {name: '空中写真(2007-)',     key: 'ort',   url: 'http://cyberjapandata.gsi.go.jp/xyz/ort/',   type: 'jpg'}
];

// 地図の初期化
var initMap = function() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(35.66, 139.74),
    zoom : 16,
    streetViewControl: true, // ストリートビュー有効
    scaleControl: true, // スケールバー表示
    mapTypeId: google.maps.MapTypeId.SATELLITE // Google標準の航空写真
  });

  // MayTypeを保持する配列定義
  var mapTypeIds = new Array();
  
  //Google の航空写真を先頭に追加
  mapTypeIds.push(google.maps.MapTypeId.SATELLITE);

  // タイル画像のリストでループ
  $.each(_chiriinMapList, function(i, chiriinMap) {
    // ImageMapType を生成
    var chiriinMapType = new google.maps.ImageMapType({
      getTileUrl: function(coord, zoom) {
        // タイル画像取得用URLを生成
        return chiriinMap.url
               + zoom + '/' 
               + coord.x + '/' 
               + coord.y + '.' + chiriinMap.type;
      },
      tileSize: new google.maps.Size(256, 256),
      maxZoom: 17,
      minZoom: 10,
      name: chiriinMap.name
    });

    // MapType に追加
    map.mapTypes.set(chiriinMap.key, chiriinMapType);

    // MayTypeを保持する配列に追加
    mapTypeIds.push(chiriinMap.key);
  });

  // Map オプションの設定
  map.setOptions({
    mapTypeControlOptions: {
      mapTypeIds: mapTypeIds, // MapType の配列
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU // ドロップダウン
    }
  });
};

いかがでしたか？
詳しいプログラムのソースは、Full Screen をクリック後、ソースを表示して確認してみてください。
こうやって古い年代順に見てみると、日本発展の歴史が見えるかもしれませんね！

マルティスープでは、Google Maps はもちろんのこと、様々な地図サービスを活用したソリューションを提供しています。

弊社コーポレートサイトにも様々な事例を紹介していますので、是非ご覧ください。

https://www.multisoup.co.jp