Webページへの地図の埋め込み

GooleMapでは利益目的の利用に該当するか否かなど、利用条件が気になるところですが、OpenStreetMapや地理院地図なら、基本的に無料で利用することができます。 それぞれのサイトで表示された地図を、画像として取得できるほか、OpenStreetMapなら、地図データのダウンロードも可能です。また、構築したWebページに地図を埋め込むこともできます。 このページではLeafletを使ってWordPressのページに地図を埋め込んでみました。また、その方法についても記載しています。

Webページへの地図の埋め込み

Leafletの利用

Leafletで地理院地図を利用する場合、地理院（GitHub）にサンプルコードがあります。 サンプルコード中で、上記の部分が、OpenStreetMapでは、以下のようになります。 下の地図がLeafletよる地図表示です。初期表示はOpenstreetMapですが、右上のレイヤーマークをクリックすると地理院地図に切り替えて比較することができます。

OpenLayersの場合

Openlayersの場合は、地理院地図の指定は、上記と同じですが、OpenStreetMapについては、ソースの指定が「source: new ol.source.OSM」で良いようです。 下記画面の右上の     で、OSMのチェックによって、地図の切り替えができます。 見かけは、LeafLetと変わりませんが、OpenLayerには、標準でLayer切り替えコントロールがない（少なくともV3の段階では）など、少し面倒だったりします。 特別な理由がなければ、LeafLetを使うのが簡単なようです。 尚、今回試した、OpenLayerのバージョンは、v3.20.1です。

まとめ

LeafLet、OpenLyaersを使って、OpenStreetMap、地理院地図をWebページ（WordPressのページ）に埋め込んでみました。JavaScriptでの処理が必要ですが、LeafLetなら、比較的簡単に、ズームやスクロール等ができる地図を埋め込んだWebページを作れそうです。