Jen

Google map導入Blog完成

最近一直想把宜蘭好玩、好吃的點放上我的Blog介紹給大家, 除了放照片之外, 如果能加上google map會更好, 所以今天晚上就花了一點時間, 把google map的功能導入我的Blog, 也弄了一個右手邊那個小地圖專門來抓Lat 、 Lng 及 zoom , 再寫了一個簡單的fucntion , 很快的就可以把想介紹的地點標示出來給大家看.

首先 , 先去Sign up for an API key , 然後引入你的blog , 我的是:

<script src='http://maps.google.com/maps?file=api&v=2&key=
ABQIAAAAFqeJPaTUJ_STea6_sdph8hSQ3A_wiL7SO0n5r2
Rd8EzAIe0GkRQCYJsJdw6rIbgoY-_X59wfqPWzvw' 
type='text/javascript'></script>

然後自已寫個簡單的fun, 像我是寫:
loadMap(mapId,Lat,Lng,zoom,addAllCon,addSearchCon,html)
/* 
 mapId : 要放置地圖的div id
Lat : y 軸
Lng : x 軸
zoom : z 軸
addAllCon : 是否加入縮放地圖及map type的control
addSearchCon : 是否加入搜尋的control
html : Marker openwindow中所要顯示的html
*/
實際使用的時候, 假設你要秀一個標示宜蘭火車站的map,只要以下的內容
<div id="map" style="width: 500px; height: 300px; "></div>

  <script type="text/javascript">
      $(document).ready(function(){
          loadMap(
               "map",
               24.755832729504966,
               121.75834750989452,
               15,
               true,
               false,
               '宜蘭火車站');
      });
  </script>

如下所示,

或許有人會問說為什麼不直接打地址來定位, 為什麼要用Lat跟lng來定位呢? 很簡單, 就是因為有些地方就算輸入地址也是找不到,如果你要抓Lat跟Lng可以用Blog右手邊的小地圖,只要按一下,map下方就會顯示Lat Lng 及zoom.

另外一點就是放map的div ,id 必須是唯一的唷, 這是比較需要注意的地方.

最後最後, 如果跟我一樣是用jquery的寫法 : $(document).ready(function(){ ... }) , 要記得引入jquery.

<script src='http://leehom59.googlepages.com/jquery-latest.js' 
    type='text/javascript'></script>

接下來就期待我有空多多介紹宜蘭好吃又好玩的地方吧, 雖然我對宜蘭有五年的空窗期...

2 意見:

  e

2008年7月25日 上午10:28

哇哇 好專業的網誌
嚇到我了~~

  暱稱: 阿健

2008年7月29日 上午2:01

厚 阿健講的話你都沒在聽!!