當你在 Google 搜尋交通路線，你會發現有很多店家都會自己畫地圖，如下圖，而有些也會載入 Google Map 來顯示地圖位置，因為畫地圖的成本高，尤其是店面是租借的，只要一換位置就得重新繪製，所以不少店家會要求網頁設計公司，使用地圖來載入。

而這裡，我就來分享一下如何自己用 LeafLet + OSM 來設計店家位置地圖，效果會像是下圖。

HTML、CSS

首先必須載入 Leaflet 的 JS 與 CSS，並設計一個 div，準備來放地圖資訊。

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
html,body{
  width: 100%;
  height: 100%;
}
#map { width: 100%;height: 100%; }
</style>
<div id="map"></div>

JavaScript

接下來就可以開始寫 JS 了，請開啟此 Codepen 來檢視。
首先我們必須先產生一個地圖，並定位在一個座標上，這樣地圖才會顯示。

.map 的第一個參數是選取 DOM，第二個則是該地圖的相關設定，而 ZOOM 則是地圖縮放等級，越小地圖就會顯示越大。

L.tileLayer 則是在 Leaflet 加上一個地圖圖層，並載入 OSM 圖資進去。

var map = L.map('map', {
    center: [22.604964, 120.300476],
    zoom: 16
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

要怎麼獲得該地區的資料呢？你可以到到 Google Map 上輸入地址後，他會產生出對應地圖，點選地圖上的 icon 點選滑鼠右鍵，裡面會有個選項叫做 [這是哪裡?]，點擊後下方彈跳就會顯示，我設計了個 gif，提供您參考。

下地圖標記 (marker)，並顯示彈跳視窗(Popup)

兩個功能一段語法解決，第一行語法是新增一個 marker 到指定座標，加入到 map 變數裡，第二行的意思該 marker 綁進彈跳視窗裡的文字，第三行則是預設彈跳視窗開啟。

值得一提的是 bindPopup 裡的內容可以寫 HTML 標籤，當然你也可以藉由 CSS 修改裡頭的樣式。

L.marker([22.604964, 120.300476]).addTo(map)
.bindPopup('<h1>高雄軟體園區</h1>')
.openPopup();

路線規劃

Leaflet 路線規劃沒有比 Google Map 做得完善，這裡也做一個小範例，你可以將它放入您的 popup 裡，來引導客戶前往 Google Map 路線規劃功能。原理很簡單，只要將網址 place 後面換成是您的地址即可

<a href="https://www.google.com.tw/maps/place/高雄市前鎮區復興四路12號" target="_blank">前往店家</a>