MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2016.08.14

Google Maps で OpenStreetMap を表示する!

img

みなさん、こんにちは!

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

 

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

 

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

 

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

2016.08.26

国土地理院の地図でストリートビューを見る

みなさん、こんにちは!

前回、Googleマップで無償地図の「OpenStreetMap」を表示する方法を説明しましたが、今回は同じような形で・・・

続きを読む

2017.01.24

InfoWindow をカスタマイズする

こんにちは。

Google Maps 上に描画したマーカーをクリックしたときに表示する吹き出し、通称「InfoWindow」をカスタマイズ・・・

続きを読む

2017.08.20

Google Static Maps API の使い方

みなさん、こんにちは!

今回は、今まで紹介していなかった「Google Static Maps API」の使い方を紹介いたします。

続きを読む

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

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

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

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