1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. 網設必知-將Google地圖與街景圖嵌入網頁中

網設必知-將Google地圖與街景圖嵌入網頁中

2014/08/04

梅問題-網設必知-將Google地圖與街景圖嵌入網頁中

  Google的地圖相當的方便,不但圖資完整,且在Android手機中,還可拿來當作導航使用,除此之外Google地圖還提供街景服務,如此一來還可知道附近的有那些店家,方便尋找位置,因此也有不少店家,會將Google地圖嵌到網頁中,讓消費者方便找尋,但隨著Google不斷的改版後,有許多朋友雖然已找到地點,但卻不知要如何嵌到網頁中,其實這個嵌入鈕,還相當的不明顯,所以梅干最近就花點時間,將它整理了一下,有需要的朋友,就一塊來看看吧!


嵌入Google地圖:
Step1
首先,進到https://www.google.com.tw/maps/preview,接著在左上角輸入要查尋的地址。
梅問題-網設必知-將Google地圖與街景圖嵌入網頁中


Step2
當找到後,點右下的齒輪圖示,再點分享和嵌入地圖選項。
梅問題-網設必知-將Google地圖與街景圖嵌入網頁中


Step3
再點上方的嵌入地圖頁籤,接著可從下拉選單中,選擇要嵌入的大小,或是自訂大小。
梅問題-網設必知-將Google地圖與街景圖嵌入網頁中


Step4
當設定好後,將下方的語法複製起來。
梅問題-網設必知-將Google地圖與街景圖嵌入網頁中


Step5
再貼到網頁中。
梅問題-網設必知-將Google地圖與街景圖嵌入網頁中


Step6
這樣就會出現在網頁中顯示。
梅問題-網設必知-將Google地圖與街景圖嵌入網頁中


嵌入Google街景圖:
Step7
若要嵌入的是街景圖時,進到http://ctrlq.org/maps/embed/,一樣在左上角輸入要查尋的地址。
梅問題-網設必知-將Google地圖與街景圖嵌入網頁中


Step8
再把左邊的黃色小人,按住不放拉到右邊的地圖上方。
梅問題-網設必知-將Google地圖與街景圖嵌入網頁中


Step9
這時當小黃人靠近地圖時,上方會顯示目前的地址,若確定無誤後,就可放開小黃人。
梅問題-網設必知-將Google地圖與街景圖嵌入網頁中


Step10

將左下角的原始碼複製起來。

梅問題-網設必知-將Google地圖與街景圖嵌入網頁中


Step11

再貼到網頁中。

梅問題-網設必知-將Google地圖與街景圖嵌入網頁中


Step12

這樣在網頁中,就會顯示街景圖了,若發現街景圖有誤時,也可回報給Google喔!
梅問題-網設必知-將Google地圖與街景圖嵌入網頁中