本篇是一個初學轉職工程師撰寫的，內容都是以原生JS無使用框架的方式達到想要達成的目標，如有刺眼之處還請多見諒
由於參與的專案需要使用到地點以及撈取店家資訊，所以使用了Google Maps api地圖資料來處理。
首先，先至Google Cloud Platform(GCP)申請 api key
google提供各式各樣的 api給客戶使用，只要有了這組金鑰就可以使用他們家的api服務，但要注意的是google api不是免費提供的，每個月有200美金的免費額度，後續用完的計價方式可以去GCP上看相關的說明。
有了這組金鑰之後就可以去js上引用了
<script> (g => { var h, a, k, p = "The Google Maps JavaScript API",
c = "google", l = "importLibrary", q = "__ib__",
m = document, b = window; b = b[c] || (b[c] = {});
var d = b.maps || (b.maps = {}), r = new Set,
e = new URLSearchParams,
u = () => h || (h = new Promise(async (f, n) => {
await (a = m.createElement("script"));
e.set("libraries", [...r] + "");
for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
e.set("callback", c + ".maps." + q);
a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f;
a.onerror = () => h = n(Error(p + " could not load."));
a.nonce = m.querySelector("script[nonce]")?.nonce || "";
m.head.append(a) }));
d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n)
=> r.add(f) && u().then(() => d[l](f, ...n)) }) ({
key: "YOUR_KEY", v: "weekly" });
</script>
在YOUR_KEY上填入你申請的金鑰 就可以引入GOOGLEMAP API的內容了。
接下來來做初始化地圖
<div class="container">
<div id="map"></div>
</div>
let map;
let center;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
center = {
lat: 25.0374865,
lng: 121.5647688,
};
map = new Map(document.getElementById("map"), {
center: center,
zoom: 14,
mapId: "4504f8b37365c3d0",
});
}
initMap();
這個部分就可以把一張沒有任何標記點的地圖呈現在網頁上
center可以改成你想要搜索以及初始化頁面的位置
zoom的數字可以填入1-20 數字愈大，地圖愈細：1是世界地圖，20就會到街道
接下來就可以使用input來搜尋想搜尋的店家名稱
<form action="" method="get">
<input type="text" name="search" />
<button>送出</button>
</form>
let input = document.querySelector("input[name=search]");
let search = document.querySelector("form");
因為搜尋會是使用剛剛初始化過的地圖作呈現，所以這邊的話會在剛剛初始化地圖的function內加入
search.addEventListener("submit", (e) => {
e.preventDefault();
findPlaces();
});
之後開始處理findPlaces()搜尋的部分
let markers = [];
async function findPlaces() {
const { Place } = await google.maps.importLibrary("places");
const { AdvancedMarkerElement } = await google.maps.importLibrary(
"marker" );
markers.forEach((marker) => marker.setMap(null));
markers = [];
const request = {
textQuery: `${input.value}`,
fields: [
"displayName",
"location",
"formattedAddress",
"businessStatus",
],
locationBias: { //可以自行設定想要搜尋的中心點，沒有特定點的話這句刪掉就會是該台裝置目前的定位位置
center: {
lat: center.lat,
lng: center.lng,
},
radius: 500, // 預計搜尋的範圍 最大50000(公尺)
},
isOpenNow: true,
language: "zh-tw",
maxResultCount: 10,
//預計搜尋的店家數量 至多20
minRating: 0,
//預計搜尋的評價星數
region: "tw",
useStrictTypeFiltering: true,
};
const { places } = await Place.searchByText(request);
if (places.length) {
console.log(places);
const { LatLngBounds } = await google.maps.importLibrary("core");
const bounds = new LatLngBounds();
places.forEach((place) => {
const markerView = new AdvancedMarkerElement({
map,
position:
place.location,
title: place.displayName,
});
markers.push(markerView);
bounds.extend(place.location);
});map.setCenter(bounds.getCenter());
} else {
alert("No results");
console.log("No results");
}
input.value = ""; }
以上code所呈現的會如上圖所示，接著在搜尋地點內打想要查閱的地點關鍵字，地圖就會以你所設定的中心點向外搜尋
如果想要更精確的搜尋，可以在request內輸入"includedTypes"，以便增加搜尋條件，想知道實際有甚麼type可以使用可以上google map api的說明文件上搜尋
