MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2016.08.14

Google Maps で OpenStreetMap を表示する!

img

みなさん、こんにちは!

今回は、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形式の画像であれば表示可能ということです。

 

【関連記事】こんな記事も読まれています

2017.01.19

Distance Matrix API の使い方を考える

みなさん、こんにちは。

 

今回は、Distance Matrix API の使い方について説明いたします。

続きを読む

2017.04.08

Googleマップで見る「ブラタモリマップ」を作成してみました

みなさん、こんにちは。

国民的人気番組「ブラタモリ」でタモリさんが訪れた街を Google マップ上で表示する「ブラタモリマップ」を作成し・・・

続きを読む

2018.06.28

新プランの Places API を調べてみました

みなさん、こんにちは。

新プラン Google Maps Platform の中で、 Places API の価格体系は、非常に細かく分類され・・・

続きを読む

 - Google Maps APIs, Google Maps JavaScript API, OpenStreetMap, スタイルマップ, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)