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

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

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 3 梅留言

  • 第3梅
    孫小毛 說道:

  • 第2梅
    超級efly 說道:

    支持一下~~Google地圖還是很好的~~ 😀

  • 第1梅

    這個好實用耶!感謝梅干大分享!
    ——————————
    @ 胎哥阿寶!吃寶沒~