分享到Facebook    分享到Plurk    分享到Twitter   分享到新浪微博

Related Posts Plugin for WordPress, Blogger...

簡易Google Map 置入方式,非API模式

Posted 星期一, 五月 18 2009 7:51 作者 黑熊

上個禮拜都在看Google Api相關的資訊,但發現到API需要經過申請,同時也比較煩瑣的語法。

最後找到了Iframe的方式,可以比較快速使用,只要部落格可以植入Iframe就可以快速使用。

Google Map 的右上方,有個連結的標籤,點選這個標籤,就可以取得Iframe語法,以總統府為例:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com.tw/maps?f=q&source=s_q&hl=zh-TW&q=%E7%B8%BD%E7%B5%B1%E5%BA%9C,+100%E5%8F%B0%E5%8C%97%E5%B8%82%E4%B8%AD%E6%AD%A3%E5%8D%80&sll=23.63446,120.970459&sspn=6.790273,14.216309&ie=UTF8&cd=1&geocode=FX8VfgEduSE-Bw&split=0&ll=25.050224,121.5166&spn=0.003281,0.006942&z=14&iwloc=A&brcurrent=3,0x3442a99bd01ebdad:0x458a79ce636a724&output=embed"></iframe><br />
<small><a href="http://maps.google.com.tw/maps?f=q&source=embed&hl=zh-TW&q=%E7%B8%BD%E7%B5%B1%E5%BA%9C,+100%E5%8F%B0%E5%8C%97%E5%B8%82%E4%B8%AD%E6%AD%A3%E5%8D%80&sll=23.63446,120.970459&sspn=6.790273,14.216309&ie=UTF8&cd=1&geocode=FX8VfgEduSE-Bw&split=0&ll=25.050224,121.5166&spn=0.003281,0.006942&z=14&iwloc=A&brcurrent=3,0x3442a99bd01ebdad:0x458a79ce636a724" style="color:#0000FF;text-align:left">檢視較大的地圖</a></small>

看起來相當複雜且不易使用,因此精過幾次嘗試,找到了核心的關鍵語法。

如果需要透過地址顯示地圖,可使用下方的語法

<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=輸入查詢的地址&z=比例大小&output=embed&t=地圖模式></iframe>

其中包含了幾個重要的參數可做修改

width=寬度

height=高度

q=輸入查詢的完整地址或經緯度,如果需要標明可在結尾加上(),於()中輸入表示名稱

z=地圖比例大小,可輸入 1-18

t=模式,沒輸入值時為預設地圖;h為衛星圖加路線;p為地形圖

output=embed 指定Google Map為崁入模式

 舉浸信會懷恩堂地址為例,地址為台北市新生南路三段90號,地圖比例16,預設地圖模式

輸入以下語法:

<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=台北市新生南路三段90號&z=16&output=embed&t=></iframe>

顯示結果如下:

Z值最大地圖顯示越放大,最小則越縮小,以例Z=10為例 顯示如下

輸入語法如下

 <iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=台北市新生南路三段90號&z=10&output=embed&t=></iframe>

更動 t 值,以 t=h 衛星地圖為例

輸入語法如下

 <iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=台北市新生南路三段90號&z=16&output=embed&t=h></iframe>

更動 t 值,以 t=p 地形圖為例,地形圖的z不可大於15,否則無法顯示圖像。

輸入語法如下

 <iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=台北市新生南路三段90號&z=14&output=embed&t=p></iframe>

另外如果直接輸入經緯度,已為懷恩堂的經緯度 25.017445,121.53338 ,並透過()標註懷恩堂,可以透過以下語法產生地圖

<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=25.017445,121.53338(懷恩堂)&z=16&output=embed&t=h></iframe>

以上說明,藉此我也可以在Blog中使用Google Map作為標識了。

若想知道更多的消息,歡迎加入布雷克人生粉絲專頁!