如何在Blogger使用UrMap/Google Maps
API之HTML
部落格的流行，使大家更能輕鬆的在網路上分享自己的點點滴滴，而不用花太多心力煩惱怎麼去編輯網頁。然而部落格的提供者各有其不同的格式，要想在部落格表現一些純粹圖文編輯以外的特殊效果，反而常常不像單純的自設網頁那麼容易。
UrMap/Google Maps API主要是java script的應用，所以要想在你的部落格使用他，你必須對java script的運作方式，以及你所使用的部落格系統提供的結構有充分的瞭解。簡單的說，這篇文章提供的方法，或許只能適用在Blogger，若你使用其他的部落格系統，可能需要另外尋求協助。
以下的方法是從澳洲網友Ron的部落格文章修改過來的，可以在Blogger上張貼UrKML做出來的UrMap/Google Maps API之HTML原始碼。
首先是處理換行的問題，部落格的文字編輯器通常都提供自動換行的功能，使用者在文字編輯器裡按enter鍵換行之後，他會自動幫你在HTML碼中加上<br>換行符號而能夠很方便的符合HTML的換行模式。然而有時候這樣的符號插入在java script之間常會造成程式碼無法運作，所以你必須避免編輯器在你UrMap/Google
Maps API的HTML原始碼裡面插入這些符號。如果你的部落格無法取消自動換行，你可能需要使用word進階取代功能等方法來除去所有UrMap/Google Maps API之HTML原始碼裡面的換行，把整段原始碼變成一行之後再貼入文字編輯器。
幸好Blogger的文字編輯器是可以取消自動換行的，在「自訂」-「設定」-「格式」這一頁裡面，你可以找到「轉換分行符號」這個選項，把他設定為「否」就可以了。
接下來就看HTML原始碼了，用記事本打開HTML，你可看到他分為<head></head>以及<body></body>部分，這是代表「整個」網頁的結構，當然是不能直接貼到代表你發表的單篇文章那一區塊的文字編輯器裡，我們必須要分開做處理。
先選「範本」-「修改HTML」，這裡的方法是要讓UrKML做出來的UrMap /Google Maps API能通用的，你只要修改一次範本，對部落格的其他部分不會有什麼影響，而以後你想在新文章裡放的是UrMap或Google Maps都可以自由選擇。
在原始碼裡<head></head>的一開始有幾行關於vml以及css的東西，這是用來顯示某些特殊效果的，你要把他加到範本的最前面
xmlns:v='urn:schemas-microsoft-com:vml'
這一行要把他加在範本一開始，比<head>更前面有連續好幾個「xmls:……」的地方，注意不要不小心刪到「'」、「>」等等。
<?xml
version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC
"-//W
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:v='urn:schemas-microsoft-com:vml'>
<style
type="text/css">
v:* {
behavior:url(#default#VML); }
</style>
這一段要把他加在範本裡直接接在<head>的後面
<head>
<style type='text/css'>
v\:* { behavior:url(#default#VML); }
</style>
接下來開始進入java script的部分
<script language='javascript'
type='text/javascript'>window.onload=create_map; function create_map() {
if
(document.getElementById("map") != null) init();}
</script>
這一段是讓瀏覽器知道你要載入地圖的，繼續接在範本裡<head>跟前述<style>…</style>的後面
<head>
<style type='text/css'>
v\:* { behavior:url(#default#VML); }
</style>
<script language='javascript'
type='text/javascript'>window.onload=create_map; function create_map() {
if
(document.getElementById("map") != null) init();} </script>
到此為止就完成範本的修改了：
<?xml
version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC
"-//W
<html
xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:v='urn:schemas-microsoft-com:vml'>
<head>
<style type='text/css'>
v\:* { behavior:url(#default#VML); }
</style>
<script language='javascript'
type='text/javascript'>window.onload=create_map; function create_map() {
if
(document.getElementById("map") != null) init();}
</script>
<b:include data='blog'
name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
///////////////////////////////////////////////////（以下省略）///////////////////////////////////////////////////////////////////
接下來就是張貼文章，剩餘的HTML原始碼主要分成兩部分，在<head>…</head>裡面<script…>……</script>中的java script是地圖的相關程式碼，他不會直接顯示出來，所以你把他貼在文章中任何位置都可以，記得是要從代表UrMap/ Google Maps API來源網址以及你授權碼的那行<script…>開始貼到所有程式碼結束的</script>。由於我們的Blogger範本使用UTF-8編碼，這邊你就不要在授權碼後插入「&charset=Big5」了，否則會造成地圖控制列的中文變成亂碼。
<script
type="text/javascript"
src="http://www.urmap.com/SearchEngine/api/getapi.jsp?v=1.06&key=你的授權碼">
</script>
<script
type="text/javascript">
var myMap = [];
////////////////////////////////////////////////////////////（中間省略）///////////////////////////////////////////////////////////
}
</script>
而在<body…>……………</body>裡面你會看到一連串<div…>…</div>，這就是代表你地圖以及航跡航點清單的要顯示在哪裡，也就是說你把這部分放在文章的哪兩段文字之間，他就會出現在那個位置。記得是要從第一個<div…>複製到最後一個</div>就好，不要去複製到</head>、<body>、</body>、</html> 等標籤。
<div
style="position:relative; width:700px; height:500px">
<div id="map"
style="position:absolute; width:80%; height:100%; border:2px ridge
white">
</div>
<div id="menu"
style="position:absolute; left: 80%; width:20%; height:100%; border:2px
ridge white">
<font style="font-size:
<div style="position:absolute;
height:5%"><b>航跡清單</b></div>
<div id="TrackList"
style="position:absolute; top:5%; height:15%; width=100%;
overflow:auto"></div>
<div style="position:absolute;
top:20%; height:5%"><b>航點清單</b><INPUT TYPE="button"
id="showButton" onclick="SlideShow(this.id,this.value);"
value="播放"></div>
<div id="WaypointList"
style="position:absolute; top:25%; height:75%; width=100%;
overflow:auto"></div>
</font>
</div>
</div>
只要對HTML有基本的瞭解就可以看懂表格標籤，應可看出地圖、航跡清單、航點清單各是怎麼設定排版。上述設定是適合排版比較寬的部落格，若你的排版較窄可能要改用比較小的畫素質，或直接刪除清單部分讓他不要顯示，只保留地圖的部分。
比較重要的是UrKML做出來的原始碼，表格各部分長寬是全部用百分比%來定義的，這是為了配合每個人的電腦銀幕可能是不同解析度，以及IE全銀幕縮放時的方便。但要貼到部落格比較建議最外一層div的「100%」改用畫素「px」來定義（這一版起的寫法只要改最外層，內層保持百分比沒關係），較好調整符合你需要的排版。由於部落格通常由許多欄位構成，如果某些欄位用百分比某些欄位用畫素，可能會造成你用百分比定義的地圖欄位消失而無法顯示。
如此就大功告成啦，應該還不會太困難。不過這種貼法有個最大的缺點是比較不適合在同一頁面貼兩張以上的地圖，因為變數不能重複，函數也沒辦法多次載入。勉強要一個個手動改變數來分配也是可以，但又會造成點選單篇文章時他只有表格而缺乏在另外一篇文章裡的程式碼，總之不太容易解決就是了。
其實部落格既然比較像是有時效性的文章組成，大概只選擇顯示最新的地圖就可以了。如果真要每篇遊記都保留地圖，比較建議的作法讓他們各自放在自己的「繼續閱讀」裡，點選單篇文章後才看到，不要設成全部出現在部落格首頁就可以避開重複的問題了，而且不要載入太多地圖，對瀏覽器的負擔也輕一點。
咦？可是Blogger沒有「繼續閱讀」的功能啊？預設的確是沒有，不過也是有人用java script修改範本的方式來達成的，但這又是另一個故事了。