Vue3 - 在網頁上嵌入Google Map及設置圖釘的兩種方法

前言

最近在開發個人作品，剛好想要實現在網頁中放入Google Map及設置圖釘，所以花了一些時間查詢、研究，發現其實有很多的方法或套件都可以實現這個功能！這邊將會紀錄兩種做法及其優缺點，分別為使用<iframe>及使用套件vue3-google-map。

一、 <iframe>

使用iframe應該是最簡單又快速的作法，iframe是HTML的內聯框架元素，它可以將另一個HTML頁面嵌入至當前網頁。

取得方式：

1. 打開Google Map搜尋你想要的地點﹙以下使用關渡大橋舉例﹚
2. 點擊分享 → 嵌入地圖 → 複製HTML

取得相關的HTML以後，我們就可以使用啦

<template>
	<iframe 
			src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5108.605898615278!2d121.45593008805143!3d25.124536107237553!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442af64b3a34a59%3A0x19f77dbe72e65285!2z6Zec5rih5aSn5qmL!5e0!3m2!1szh-TW!2stw!4v1709119611724!5m2!1szh-TW!2stw"    
			width="600" 
			height="450" 
			style="border:0;" 
			allowfullscreen="" 
			loading="lazy"    
			referrerpolicy="no-referrer-when-downgrade">
	</iframe>
</template>

在這邊可以看到它有很多的屬性，我們可以再依需求去調整

• src：要嵌入的網頁URL
• width：顯示寬度﹙預設為px﹚
• height：顯示高度﹙預設為px﹚
• style：CSS樣式設計
• allowfullscreen：是否啟動全螢幕模式﹙可視性會因瀏覽器或設備而異﹚
• loading：是否應該在頁面加載時立即加載﹙eager﹚，或者僅在需要時加載﹙lazy﹚
• referrerpolicy：控制瀏覽器發送的引薦信息﹙即告訴被嵌入內容是從哪個網頁中載入的﹚

優點：快速、方便、簡單

缺點：同一開始所提，<iframe>是將另一個HTML頁面嵌入至當前網頁操作，所以對網頁效能、維護性、資安並非很有利

二、 vue3-google-map

在官方文件有提到，若要使用此套件，我們要先取得Google Map API 金鑰。大家可以依這裡的說明走，首先要建立Google Cloud 專案並設定信用卡資訊才可以開始使用相關API並取得金鑰，這邊就不贅述詳細流程了。

取得金鑰流程

在我們取的金鑰後，就可以開始進入重頭戲！

第一步：安裝套件

npm install vue3-google-map

第二步：寫入相關程式﹙以下使用Options API寫法﹚

<template>
	<!-- 地圖 -->    
	<GoogleMap  
		api-key="YOUR_GOOGLE_MAPS_API_KEY"  
		style="width: 100%; height: 500px"  
		:center="center"  
		:zoom="15"  >  
			<!-- 圖釘 -->  
			<Marker :options="markerOptions"></Marker>  
	</GoogleMap>
</template>

<script>  
	// 將Google Map 與 圖釘引入 ​
	import { GoogleMap, Marker } from 'vue3-google-map';  
	
	export default {    
		components: { GoogleMap, Marker },    
		data() {      
			return {        
				center: { 
			   // lat:緯度, lng:經度​
					lat: 25.12662, lng: 121.45747 
				},        
				markerOptions: {     
					position: { 
						lat: 25.12662, lng: 121.45747 },        
				},      
			}   
		},  
	};
</script>

• 金鑰不建議直接寫在template上，可先寫到.env檔後再使用環境變數帶入

基本上，這樣寫完就可以簡單呈現Google Map與地點圖釘了。

在這邊也簡單說明一下相關屬性及設定：

1. center：地圖中心的經緯度
2. zoom：地圖初始縮放比例
3. markerOptions：圖釘相關設置﹙Google文件﹚
4. mapOptions：地圖相關設置﹙Google文件﹚

當然，vue3-google-map針對地圖還有其他的設定，若大家有需要還可以繼續再深入研究，但必須搭配Google文件一起閱讀才會比較清楚相關的內容。

優點：更高的靈活性、更多可以客製化的功能

缺點：需對Vue有了解，若需要比較複雜的設定會花比較多時間研究，除了官方文件，還需要搭配Google文件一起閱讀才會比較清楚

以上，就是我這一次的學習紀錄，Bye！

※ 參考文件

1. iframe
2. vue3-google-map