マップを使用せずにWebサイトなどに地図を表示する方法です。無料のJavaScriptライブラリLeafletを使って地図データ(タイル)を表示させます。マーカーを乗せることも可能です。使い方ライブラリのリンクダウンロードして自分のサーバに置く方法もありますが、今回はWeb上のファイルを指定します。<head>要素に以下を記述します。src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>HTML地図を表示させたい箇所に<div>要素を記述します。id="map"></div>スタイルシート地図用の<div>要素に対して表示する大きさなどを指定します。表示位置に指定した<div>要素より下に地図を表示するためのスクリプトを記述します。ここではタイルにOpenStreetMapを利用しています。target="_blank">国土地理院</a>',}).addTo(map);マーカーを表示するマーカーを表示したい座標を指定して地図にセットします。135.501844]).addTo(map);マーカーポップアップを表示するマーカークリック時にポップアップを表示させることができます。HTMLなのでリンクなども記述できます。ポップアップオープン.marker.bindPopup("<p>大阪市役所</p>").openPopup();マーカーポップアップのオプション設定方法オプションはL.popup()の引数に連想配列を渡して指定できます。下記ではマーカーポップアップの最大幅を320pxにしています。320}).setContent(popupMessage);marker.bindPopup(popup);設定可能なオプションは公式ドキュメントに一覧があります。マーカーをオリジナルの画像にするアイコンを定義してマーカー作成時に指定します。startMarkerIcon}).addTo(map);ツールチップの表示マーカー上にマウスを乗せた時にメッセージを表示することができます。こちらもHTMLで記述できます。地図が縮小された時に近くのマーカーをクラスタリング(集合)します。ライブラリのリンク<head>要素に以下を記述します。クラスターグループをマップに追加.map.addLayer(markers);クラスターグループのオプションマーカークラスターオブジェクト生成時にオプション指定が可能です。上記以外にもオプションはあります。マップのオプションマップオブジェクト生成時にオプション指定が可能です。false});マウスホイールによるズーム量を調整するマウスホイールによる倍率変更の間隔を調整できます。マウスホイールを何ミリ秒動かせば倍率を変更するかで指定します。デフォルトは40ミリ秒になっています。default:40});ブラウザいっぱいに地図を表示する方法スタイルシートを以下のように記述します。HTMLの<body>部分には地図表示用の<div>要素のみ記述します。コメントをキャンセルメールアドレスが公開されることはありません。次の記事ファイルアップロードボタンのデザインを変更する執筆者のことかもめ元フリーランスのSE、PG。忘れやすい性格のため備忘録として色々残していきます。