Webページ上にに地図を表示する(OpenLayers)【無料】

ブログ内でお店の宣伝をするとき、地図をWebページ上に載せたくなるときがあります。

今回の方法を用いることで、手軽にWebページに地図を表示させることができます。

実際にやってみた

以下のHTMLをWebページに記載するだけです。
地図データはオープンデータベースの「Open Street Map」を使用しています

上記のソースを実行した結果が以下になります。
地図を表示した上で、鳥取砂丘にマーカーを配置しています。

解説

6行目、7行目でOpenLayersのjavascriptファイルをWeb上から取得しています。
つまり、本ソースコードはインターネットが使用できない場所では利用できません。

10行目のdivタグがOpenLayersが地図を構築する基準のタグとなります。id属性は41行目のtargetと合わせる必要があります。

style=”width:200px; height:300px” とすることで、画面上での地図の大きさを設定できます。

13~17行目で初期表示位置とズームの設定を行っています。
fromLonLat([経度, 緯度])で任意の場所に合わせることができます。

20~37行目で、鳥取砂丘の地点にマーカーを配置しています。
OpenLayersではマーカー以外にも「円」「線」「矩形」「多角形」といった図形を地図上に配置できます。

40~55行目で地図の初期化を行っています。
初期表示位置やマーカーとの関連付けも本処理内で行っております。

まとめ

本記事では手っ取り早く地図を表示する方法を解説いたしました。

OpenLayersは少量のHTMLを記述するだけで、Webページ上に地図を載せることができるjavascriptライブラリです。

単純に地図を表示するだけでなく、マーカー等の図形を地図上に配置することが可能です。

OpenLayersは非常に高機能なライブラリであるため、この他にも地図に関連した役立つ機能が搭載されています。
次回以降の投稿で詳しく解説させていただきます。

OpenLayersについての別記事もぜひご覧ください!

①図形を描画する(マーカー、線、円、多角形)
②テキストを書き込む(矩形)
③フリーハンドで書き込む
④矢印で強調する
⑤固定画像を配置する
⑥図形を選択する
⑦図形を移動させる
⑧固定画像の移動
⑨図形を変形させる
⑩長方形を変形させる
⑪図形を複数選択する
⑫図形をJSON形式で保存&読込
⑬図形を削除する
⑭線のスタイルを設定する
⑮図形の色を設定する

【入門】地図を表示させる方法
ボタンを配置する方法
ミニマップを表示する方法

    コメント

    タイトルとURLをコピーしました