網頁設計, 網頁資源

網設必知-將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地圖與街景圖嵌入網頁中