在 blogger 內文中使用 google maps api

Blogger.com 號稱是最自由的 Blog Service Provider，可以不放廣告，也沒有篇數留言數的限制。是不是最自由我不確定 (因為我沒認真用過其它的系統)，但我知道 Blogger 的 template 系統真的很難搞，首先就是他的 template 使用 xml 語法真是我最不喜歡的做法，要用到比較複雜的控制時，寫出來的 template 都是難看到一個程度 (如果寫得出來的話，凡是用 xml 來充當語法的都很糟)，更別提那個 module layout 系統，如果是乖乖的只用它提供的拖拖拉拉系統的話，或許還會覺得蠻好用的，不過想要改一下 html 佈局時，打開他的 module 原始碼就會讓你昏倒了。再來就是他強制中獎使用 iframe 的 Navbar 和 WidgetManager ，讓你的網頁怎麼寫都不可能通過 XHTML 1.0 Strict 的 validate。還有他預設把換行改成
，但又不會聰明跳過 pre, code 不處理，造成在網頁上放 javascript 程式時的麻煩。
==== 抱怨分隔線 ====

一般來說，在 blog 使用 JavaScript 通常都是放到側邊裡，做來顯示一些小工具等等，在 blogger.com 中就是要改 template，雖然 template 難看，倒也沒為難使用者，想用的都可以正常使用。但如果是在 blog 內文中要放 JavaScript 時就會遇到上面說的 <br /> 問題 (還好並不會過濾掉 <script> )。例如你在內文中寫

<script type="text/javascript">
google.load("maps", "2");
google.setOnLoadCallback(function(){
  var map = new google.maps.Map2(document.getElementById("map"));
  map.setCenter(new google.maps.LatLng(23.63446,120.970459), 7);
});
</script>

後來輸出的文章就會變成

<script type="text/javascript"><br />google.load("maps", "2");<br />google.setOnLoadCallback(function(){<br />  var map = new google.maps.Map2(document.getElementById("map"));<br />  map.setCenter(new google.maps.LatLng(23.63446,120.970459), 7);<br />});<br /></script>

想當然就不會正常執行。這個問題避開的方法最好的就是關掉把換行轉為 <br /> 的設定，不過因為這個設定是 global 的，會影響到所有的文章，所以除非一開始就這樣設定，不然後來再改等於要修改之前所有的文章。不然就是要把程式寫成一行，這樣就不會被 <br /> 影響了，要達到這個做法第一個就是自己動手改，另一個方式就是在程式頭尾都加上註解，如下

<script type="text/javascript">/*
*/google.load("maps", "2");/*
*/google.setOnLoadCallback(function(){/*
*/  var map = new google.maps.Map2(document.getElementById("map"));/*
*/  map.setCenter(new google.maps.LatLng(23.63446,120.970459), 7);/*
*/});/*
*/</script>

這樣最後的輸出就會正好把 <br /> 註解掉，很蠢但會動 (前提是你的 Script 可以被寫成一行) :)

再來就是和 google maps api 有關。如果你在文章中用 maps api 時使用下面的方法載入程式

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=ABCD">

如果當你兩篇文章都使用到 maps api 並同時出現的話，上面的主程式就會被載入兩次，雖然使用上不會有問題，但卻是無意義的浪費頻寬 (maps api 蠻大的)。這個問題的解法一是把上面那段放到 template 中，而在本文中不再載入，但這樣做當你的 blog 中沒有用到 maps api 時，也會強制載入。第二個方法就是用 ajaxlib 來載入 maps api，也是官方使用範例:

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCD"/>

google.load("maps", "2");

google.setOnLoadCallback(function(){
  var map = new google.maps.Map2(document.getElementById("map"));
  map.setCenter(new google.maps.LatLng(23.63446,120.970459), 7);
});

使用時一樣是把載入 http://www.google.com/jsapi?key=ABCD 這段放到 template 中，不過還好這玩意兒很小，而在每一篇要用到 maps api 的地方都使用 google.load 和 google.setOnLoadCallback 。雖然看起來好像變麻煩了，但這樣的好處是當多個地方都這樣用時，maps api 主程式的部分不會重複載入，而且現在 ajaxlib 已經整合好幾個主流 JavaScript Library 了(例如 jQuery...)，快速方便又有良好架構。