お問い合わせ

tel:0570-046-503

営業時間 10:00~17:00(定休日:土日祝日)

OpenStreetMapをWEBサイトに埋め込む方法

 

OpenStreetMapとは

地図検索サービスといえば、Google Mapsを思い浮かべる人がほとんどでしょう。Google Mapsは基本的に無料で利用可能で、外部から利用するためにさまざまなAPIが公開されているのですが、商用利用する場合は有料となる場合もあります。

そんなGoogleMapをじわじわと追い上げている「Open Street Map」というサービスがあります。Open Street Mapは、ユーザーが自由に利用でき、かつ編集機能を使って世界地図を作成できる地図検索サービスです。

Googleにあるストリートビュー機能はなく、住所情報もGoogle Mapsに比べるとまだまだ少ない状況ですが、全世界のユーザから情報をもとに、日々情報が充実してきている状況です。

リアルマックス本社周辺

上記は弊社周辺の地図です。2014年の土砂災害の被害地域も表示されています。

主な活用例

OpenStreetMapが利用されている身近な例をご紹介いたします。 こちらの地図をご覧ください。 そうFacebookの地図表示は実はOpen Street Mapを利用しています。FacebookはこれまでBingを利用していましたが、OpneStreetMapに切り替えたようです。

宮島

その他にも「Yahoo地図」でもOpenSteetMapの表示に切り替えることが可能なようです。

さっそく使ってみる

今回はGoogle MapsのようにWebサイト上に地図を埋め込む方法をご紹介いたします。まずはOpen Street Mapのサイトにアクセスします。

OpenStreetMapシェアボタン

画面右側に「共有」ボタンがあるので、クリックすると右側にメニューが表示されます。「HTML」を選択すると、埋め込み用コードが表示されるので、コピーして貼り付けます。

八木周辺地図2

貼り付けたコードは下記の通りとなります。

まとめ

WEBサイトに埋め込む意外にも、マーカーを設置したり、吹き出しを設定したりとAPIを利用するとさまざまことが可能ないようです。後日、詳細情報をご紹介いたします。

The following two tabs change content below.
リアルマックス スタッフ
リアルマックス スタッフ
  • ブログランキング・にほんブログ村へ
  • FC2ブログランキングへ
  • 人気ブログランキングへ
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る