Open Street Map: マップ上にマーカー表示と経度・緯度の取得するには

前回、Open Street MapをWebサイト上に表示させる方法を書きましたが、今回はマップ上をクリックするとマーカーを表示させる方法について紹介します。

ちなみにGoogleマップの場合、標準でマップ上をクリックすると、小さいマーカーが現れて住所や場所の名称が現れます。Open Street Mapは、残念ながらそんな気の利いた機能はなく、JavaScriptでコーディングしてあげる必要があるんです。ここが商用とオープンソースとの典型的な違いです。（笑）

[ad#top-1]

まずは経度緯度データを表示する場所を設置

地図の下に「LonLat」というdiv要素を設置します。地図をクリックするとここに経度と緯度のデータが現れるようにします。

 

ソースコードはこちら

前回のソースに追加しました。ちょっと複雑ですが以下の通りです。

 

実行するとこんな感じ

ブラウザで表示されるとこのようになります。（http://pineplanter.moo.jp/osm/index2.html からiframeを使って表示されています。）

地図をクリックするとマーカーが現れ、更に下に経度と緯度が表示されるようになっています。

 

この仕組みを利用して、位置データをデータベースに登録したり、データベースから読み込んだ位置データからマーカーを設置したりすることができるわけです。アプリで使う場合の基本的なところですね。

前述の通り残念ながらGoogleマップのような住所や施設名が表示されるような機能はありませんが、Googleマップで制約の壁にぶつかったときは、代替えの候補として考えておくと良いかと思います。

[ad#ad-1]

 - Open Street Map