Tag for google maps

tinyMap – 自訂個人 Google Map 的 jQuery 擴充套件

Posted by essoduke - 2009 年 10 月 29 日 20:53:04 - 783 User Views
 

這個擴充套件可以輕鬆建立自訂的 Google Map，舉凡尺寸、地圖類型和縮放控制、縮放等級，更能加入設定好的標記地點並填上說明。

下載位址

安裝

  1. <!-- Include Google Map API --> 
  2. <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=<em>YOUR_API_KEY"></script> 
  3. <script type="text/javascript" src="jquery.tinymap-1.0.js"></script>

參數說明

  • width: 地圖寬度 (Number) /* 預設：640px */
  • height: 地圖高度 (Number) /* 預設：480px */
  • latlng: 地圖置中的座標或地址，若為座標請使用 [x, y]，地址則直接輸入。
  • control: 顯示地圖類型選單 (Boolean) /* 預設：true */
  • zoom: 顯示地圖縮放選單 (Boolean) /* 預設：true */
  • zoomLevel: 預設地圖縮放等級 (Number) /* 預設：13 */
  • mapType: 預設地圖類型 (String) /* 選項：default, hybrid（混合）, satellite（衛星） 預設：default */
  • marker: 標記群組 (JSON)：

    [{addr:'標記地址或座標', text:'標記說明', icon:[圖示寬度, 圖示高度, 圖示位址]}]

範例：顯示高雄市政府地圖

若無法顯示 Object Frame 內容，請使用 IE 以外的瀏覽器。

  1. $(function(){
  2.  
  3.   var set1 = {
  4.     width: 639,
  5.     height: 359,
  6.     latlng: '高雄市苓雅區四維三路2號',
  7.     zoomLevel: 1˙
  8.   };
  9.  
  10.   $('#map1').tinymap( set1 );
  11.  
  12. });

範例：以衛星地圖及自訂圖示標示多個地點

若無法顯示 Object Frame 內容，請使用 IE 以外的瀏覽器。

  1. $(function(){
  2.  
  3.   var set1 = {
  4.     width: 639,
  5.     height: 359,
  6.     latlng: [22.638610116646756, 120.30184864997864],
  7.     mapType: 'satellite',
  8.     zoomLevel: 12,
  9.     marker: [
  10.       {addr:'高雄市鼓山區萬壽路350號', text:'<strong>壽山動物園</strong><br />高雄市鼓山區萬壽路 350 號', icon:[24, 24, '2.png']},
  11.       {addr:'高雄市左營區翠華路1435號', text:'<strong>蓮池潭</strong><br />高雄市左營區翠華路 1435 號', icon:[24, 24, '3.png']},
  12.       {addr:'高雄市苓雅區自強三路5號', text:'<strong>東帝士 85 大樓</strong><br />高雄市苓雅區自強三路 5 號', icon:[24, 24, '4.png']},
  13.       {addr:'高雄市左營區高鐵路105號', text:'<strong>台灣高鐵左營站</strong><br />高雄市左營區高鐵路 105 號', icon:[24, 24, '5.png']},
  14.       {addr:'高雄市三民區建國二路318號', text:'<strong>台鐵高雄車站</strong><br />高雄市三民區建國二路 318 號<br /><a href="http://service.tra.gov.tw/Kaohsiung/StationTimeTable/index.aspx">台鐵高雄車站</a>', icon:[24, 24, '6.png']}
  15.     ]
  16.   };
  17.  
  18.   $('#map1').tinymap( set1 );
  19.  
  20. });

更多範例請參考：tinyMap – 自訂個人 Google Map 的 jQuery 擴充套件

Google Map 座標工具 v1.1

Posted by essoduke - 2009 年 04 月 05 日 14:50:26 - 1,132 User Views

今天邊玩 Web 棒球的同時，就順手更新了 Google Map 座標工具。

Google Maps 早在 2007 年就已經開放可以搜尋台灣地址，所以 v1.1 主要是加入顯示標記地址的功能，下次預計會加入最基本的搜尋並且可以自訂 JSON 的輸出內容。

Google Map 座標工具 1.1

Google Map 座標工具 1.1

這次使用了 Google Maps API Geocoding Service。Geocoding 傳回的是一組包含座標、地址、郵遞區號等資料的 JSON，所以這部份很好處理，比較棘手的是遇到 jQuery selector 抓不到 append 所建立的 li 清單，所以用了 jQuery FlyDOM Plugin 建立 DOM 的方式來解決。

延伸閱讀：

Google Map 座標工具

Posted by essoduke - 2009 年 03 月 19 日 20:44:13 - 2,656 User Views

因為這個案子的需要，所以就做了 Google Map 座標工具，靈感來自於 Interactive Polyline Encoder Utility，但是沒有加入劃線功能，只多了輸出 JSON 的選項。

※支援 Firefox 3/Opera 9.6，IE6/IE7 在拖曳上似乎有問題…

Google Map 座標工具

先點選要標記的位置（可連續點選、拖曳）右側的清單上就會出現該點的座標，也可以點選清單內的座標，左側地圖就會顯示出對應的標記；輸出 JSON 的作用是方便後續的應用，包括存入資料庫…等等。

Google Map 座標工具

Google Map 座標工具

改天再補上 Google Maps API 的使用心得…

延伸閱讀

XHTML 1.0 Strict 的 iframe 標籤替代方案

Posted by essoduke - 2008 年 12 月 23 日 21:18:59 - 828 User Views

前幾天裝了 XML-Google Maps Plugin，預設會輸出 iframe 來內嵌 Google Maps，只是 XHTML 1.0 Strict 已經不支援 iframe 這個標籤，所以改用下列方式替代：

原來的用法：

  1. <iframe id="embeddedhtml" src ="http://www.ashcombe.surrey.sch.uk/MM_french/1a_self_family/self_family_fset.htm" width="100%" height="600"></iframe>

改成：

  1. <object id="embeddedhtml" type="text/html" data="http://www.ashcombe.surrey.sch.uk/MM_french/1a_self_family/self_family_fset.htm" width="100%" height="600"></object>

參考來源：[#MDL-17702] iframe is not supported in XHTML 1.0 Strict – Moodle Tracker

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.