ウェブサイト上で地図を表示させる時はどんなウェブサービスを使っていますか?一番多いのはGoogleマップだと思います。
柔軟にカスタマイズができて至れりつくせり。

しかしマップ上に何千件ものマーカーを設置するには、マップAPIの有料版を取らなければいけません。膨大なデータを地図に表示させるにはお金がかかります。
そこで登場するのがOpenStreetMap(通称OSM)というオープン・ソースの地理情報です。JavaScriptのAPIで簡単に利用できます。

OpenStreetMap Japan

OpenStreetMap Japan

はてブ数

https://openstreetmap.jp/

自由な地図をみんなの手に/The Free Wiki World Map

そしてOSMを扱う時に便利なJavaScriptライブラリがLeaflet。

Leaflet

Leaflet

はてブ数

http://leafletjs.com/

Leaflet

OSMのAPIだけでも柔軟にカスタマイズできますが、それをもっと簡単に記述できるようになります。

地図を表示する

必要なものを読み込んで、地図を描画するタグを置く。だけ。

必要なファイルをロード

地図を描画したいところにタグを置いて、CSSで高さを指定

地図のデフォルト値を設定して、描画する

特定の座標にマーカーを置く

動作サンプル

See the Pen raGPex by sato4yoshida (@sato4yoshida) on CodePen. 1

geoJSONのロードしてマーカーを表示する

ざっくりと使い方がわかったところで、本題へ。
地図上に大量のマーカーを置く時は、geoJSONを利用すると便利。
マーカーを置く緯度経度をJSON形式で扱え、JSONなので別ファイルで保存なんてこともできる。

geoJSONのフォーマット

geoJSONは最低限でこんなフォーマット。typeとgeometryにどの座標にどう描写するかが格納されています。

動作サンプル

See the Pen OSMとLeafletでgeoJSONをロード by sato4yoshida (@sato4yoshida) on CodePen. 1

マーカーをクリックで情報を表示する

よくあるようなマーカークリックで情報を表示させたりもできます。

geoJSONのproperty.popupContentにクリック時に表示するコンテンツを記述

マーカーをセットする時にクリック時のイベントをバインド(onEachFeature)して、クリックイベントが発火したらpopupContentの値を呼び出します。

動作サンプル

See the Pen OSMとLeafletでgeoJSONをロード by sato4yoshida (@sato4yoshida) on CodePen. 1

マーカーを大量に置いてみる

3,000個分のgeoJSONをランダムで生成してるのでお使いのPCによっては重たいかもしれません。

See the Pen OSMとLeafletでマーカーをいっぱい置いてみる by sato4yoshida (@sato4yoshida) on CodePen. 1