網站 / Google Map嵌入頁面(2021/10/9修改)

網站 / Google Map嵌入頁面(2021/10/9修改)

Post Views: 2,024

如何將google map嵌入WordPress頁面

在文章內容裡需要用到 html、 css 與 javascript

但是無法直接透過WordPress的文字編輯器來輸入這些程式碼 (至少對現階段的我是如此)

查了很多教學之後

使用了兩個外掛

1.Code Embed

1. Code Snippets

編輯套用的css，將程式碼加在<head></head>之間

2. php everywhere

利用php echo的功能輸出 html 與 javascript

搭配php everywhere將短碼標註在文章裡

2. google maps javascript api的設定

如果只是基本嵌入 只需要 google maps embed api，取得金鑰 (詳細方法可以看參考資料)

要進一步控制地圖的呈現內容就要用 google maps javascript api
 

整體流程如下：

1.設定放置地圖的Div (範例是 map)

2.在Code Embed 設定div #map 的css樣式,以及要套用的api(設定地圖中心點、地標等等)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 
<style type='text/css'>
	#map { height: 400px; width:100%; }
</style>
<script type="text/javascript">
	var map; 
	var marke; 
	var position = {lat: 25.027705,lng: 121.529389}; 
	function initMap() { 
		map = new google.maps.Map(document.getElementById('map'), 
			{ center: position, zoom: 16 }); marker = new google.maps.Marker(
				{ position: position, map: map, title:"師大圖書館校區教育學院大樓", }
				); 
			}
</script> 

<script type="text/javascript" 
	src="https://maps.googleapis.com/maps/api/js?key=***************************************&callback=initMap" async defer> 
</script>

<div id="map"></div>

3.先編輯要套用的api：設定地圖中心點、地標等等

4.用 php echo將api的script程式碼包起來

5.在文章編輯的php everywhere貼上編輯後的程式碼

6.最後在文章要放地圖的地方插入 Code Embed 的短代碼

以下是以師大圖書館校區教育學院大樓(經緯度：25.027705, 121.529389)作為範例

參考資料

1.Google Maps API – 網頁載入地圖 ( 起手式 )-連結
2.Google Maps API – 使用地圖與基本設定-連結
3.Google指南 Get an API Key-連結
4.PHP echo html 的技巧-連結
5.【WordPress教學】如何自訂WordPress語法？6個程式碼片段範例教學-連結

Tags: , , , ,