マルティスープ
Staff Blog

2016.08.14

Google Maps で OpenStreetMap を表示する！

みなさん、こんにちは！

今回は、Google Maps 上に「OpenStreetMap」を表示する方法を説明いたします。

「OpenStreetMap」 を知らない方がいるかもしれませんので簡単に説明しますと、有志の方で世界中の地図を作成するプロジェクトがあります。このプロジェクトの目的は、誰でも自由に使える地図を作成することです。メンバーになれば、自分自身で地図の作成、編集を行うことも可能です。私も一応、メンバーに登録しています。詳しくは、下記のサイトをご参照ください。

OpenStreetMapのサイトはコチラ

では、早速コードを見ていきましょう。

//地図の初期化
function initMap() {
  var osm = 'OpenStreetMap';
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {lat: 35.7, lng: 139.7}, 
    mapTypeControlOptions: {
      // GoogleMapの道路地図とOpenStreetMapを使用する設定
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, osm] 
    }
  });

　// OpenStreetMaps のImageMapTypeを作成
  var osmMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var normalizedCoord = getNormalizedCoord(coord, zoom);
      if (!normalizedCoord) {
         return null;
      }
　　　// OpenStreetMaps のタイル画像を取得するURL
      return 'https://tile.openstreetmap.jp/' +  
        + zoom + '/' 
        + normalizedCoord.x + '/' 
        + normalizedCoord.y + '.png';
    },
    tileSize: new google.maps.Size(256, 256), //地図画像のサイズ
    maxZoom: 19, //最大ズームレベル
    minZoom: 0, //最小ズームレベル
    radius: 1738000,
    name: osm //名前
  });

  // マップタイプに「OpenStreetMap」追加
  map.mapTypes.set(osm, moonMapType);
　// デフォルトを「OpenStreetMap」にする
  map.setMapTypeId(osm);		
}

google.maps.ImageMapType で「OpenStreetMap」のマップタイプを作成しています。その中の getTileUrl で 「OpenStreetMap」 のサイトから地図画像を取得するためのURLを作成しています。

// 連続してタイルを表示するときのX,Yを算出
function getNormalizedCoord(coord, zoom) {
  var y = coord.y;
  var x = coord.x;
  var tileRange = 1 << zoom;
  // Y方向はループしない
  if (y < 0 || y >= tileRange) {
    return null;
  }
  // X方向はループする
  if (x < 0 || x >= tileRange) {
    x = (x % tileRange + tileRange) % tileRange;
  }
  return {x: x, y: y};
}

通常であれば左上には「地図」「航空写真』のボタンですが、今回は「地図」「OpenStreetMap」と表示されています。

Full Screen

OpenStreetMapはTMS（Tile Map Service）形式で配信されています。そのため、同様の形式である国土地理院の電子地図も表示可能です。

Full Screen

いかがでしたか？Google Maps 上にわざわざ OpenStreetMap を表示する必要なんてあまりないかもしれませんが、ここでのポイントはTMS形式の画像であれば表示可能ということです。