Blog

OpenStreetMapを使ってみた

GoogleMapsが1日あたり 25,000 件を超えると有償になるということで

大規模サイトの場合は他のサービスを使う場合がある。

https://developers.google.com/maps/faq?hl=ja#usage_pricing

今回使用したのが

http://osm.jp/

 

デモ

 

まずはJSを読み込む

CSSなどは特になく、これだけを読みこめばOK

 

地図を表示する

このあたりはGoogleMapsと同じ。

指定したターゲットに対して上記のようなjsを実行する。

すると地図が表示される。

 

マーカーを設置する

上記に加えてマーカーを出力するソースを追加。

マーカーの置き方は色々あるようだが、このやり方がGoogleMapsには無いのと、設定と管理が楽そうで、個人的には気に入った。

今回マーカーを3つ設定しており、それぞれで設定ファイルを読み込んでいる。

こちらは1.txtのサンプル

TSV形式になっており、

緯度、経度、タイトル、内容、アイコンパス、アイコンサイズ、アイコン位置

となっている。

欠点としては、パラメータで吹き出しのサイズ指定ができないようなので、jsで調整しなければならないということ。

構造としては、

.olPopup : width=210px,hight=210px

div : width,height指定なし

.olPopupContent : width=200px,hight=200px

h2 : タイトル

p : 内容

という順番になっている。

 

 

Author Profile

hoshino

ECのことを中心に書きたいと思います。
ネタが無いときはプログラムやデザインのことも書きます。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ