因為用 google map api 在我的案子上不可行（簡單來說就是客戶不會想支付這部份的費用，也不可能請他們設定綁信用卡跟金鑰給我），那時候合作提案的公司給了我農業易遊網的網址，說那是他們想做的效果。我仔細看了地圖發現他們並不是使用 google map ，就研究一下他們是用哪個套件，想說不難使用的話也許我可以拿來用。
他們用的是這套：https://leafletjs.com/
由於我是 js 苦手，上網找其他說明有時候照貼 code 地圖也跑不出來。下面這個是我測試後確定可以跑起來的寫法：
head 裡面先引用這些
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
body裡面則是這些
<div id="map" style="width:100%;height: 400px;"></div>
//地圖顯示的區塊
<script>
const map = L.map('map').setView([25.06303099468595, 121.53381965219468], 16);
//建立一個新的地圖，中心位置設定在行天宮的經緯度，還有預設的倍率為16
const customIcon = L.icon({
iconUrl: 'https://divi.joyhsu.com/wp-content/uploads/2024/12/icon@2x.png',
iconSize: [30, 37],
});
//建立自定的地標icon圖示
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
//引用OpenStreetMap，跟最大放大倍率為19
const marker_1 = L.marker([25.06303099468595, 121.53381965219468],{icon: customIcon}).addTo(map)
.bindPopup('<a href="https://www.youtube.com/" target="_blank">行天宮</a>').closePopup();
//第一個地標。如果使用自定icon需要在經緯度後面多加{icon: customIcon}
//因為我預設都不顯示彈跳視窗，所以用closePopup()
//如果要顯示就寫openPopup()
const marker_2 = L.marker([25.063018150649686, 121.52995702521183],{icon: customIcon}).addTo(map)
.bindPopup('<a href="https://www.youtube.com/" target="_blank">亞都大飯店</a>').closePopup();
//第二個地標
</script>
map 的 style 用行內樣式寫是因為我要置入在 divi 的區塊內，如果不這樣寫他高度顯示會不正常。如果是自己單獨寫的 html 的話， css 可以不用行內樣式寫。
之後使用比較費工的反而是要去手動查找地點的經緯度。這個就是去 google map 先搜到地點，在地點上按右鍵就會跳出一個框框，顯示該點的經緯度，拷貝起來即可使用。詳細可參考這篇的在 Google 地圖中查看地點座標