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

 

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

2016.08.23

Google Maps でロングタップのイベントを発生させるには

みなさん、こんにちは!

今回は Google Maps 上でスマホやiPadなどのタブレットでロングタップに対応する方法をご紹介します。

続きを読む

2016.09.27

MarkerClusterer ライブラリの紹介

みなさん、こんにちは!

 

Google Maps 上に 店舗の情報などマーカーをたくさん描画したとき、マーカーが重なっ・・・

続きを読む

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)