# 如何取得 Google Map 嵌入原始碼？

> 


電子豹「行銷網頁」提供 Google 地圖預覽功能，透過元件即可快速嵌入地圖。






1. 請在 Google map 中輸入目的地，並選擇地點。










2. 調整地圖大小，若想以原始街景呈現，請點擊右下角街景圖。










3. 確認視覺呈現後，點擊搜尋框右側「選單」。












4. 點擊「分享或嵌入地圖」。












5. 選擇「嵌入地圖」，並點擊「複製 HTML」。










6. 將複製的 HTML 原始碼，貼上電子豹後台編輯器中。






**分類：** Newsleopard 後台教學  
**作者：** Bao  
**發布日期：** 2024-08-22T06:43:19.000+08:00


電子豹「行銷網頁」提供 Google 地圖預覽功能，透過元件即可快速嵌入地圖。

### 1\. 請在 [Google map](https://www.google.com/maps?ref=cms.newsleopard.com) 中輸入目的地，並選擇地點。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2024/07/googlemap-html-01.png)

### 2\. 調整地圖大小，若想以原始街景呈現，請點擊右下角街景圖。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2024/07/googlemap-html-06.png)

（點擊右下角街景圖，再調整角度）

### 3\. 確認視覺呈現後，點擊搜尋框右側「選單」。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2024/07/googlemap-html-02-1.png)

### 4\. 點擊「分享或嵌入地圖」。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2024/07/googlemap-html-03.png)

### 5\. 選擇「嵌入地圖」，並點擊「複製 HTML」。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2024/07/googlemap-html-04.png)

### 6\. 將複製的 HTML 原始碼，貼上電子豹後台編輯器中。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2024/07/googlemap-html-08.png)