Google Map Javascript API 用於行動裝置

若想在手機上單純使用Web來展示Google Map
Web上有需要注意的是地圖畫布的大小,預設可以先將地圖畫布的div寬度和長度都設定100%
當然也可以用DOM的navigator.userAgent屬性來判斷是使用什麼裝置來上網,依裝置來設定畫布大小

Google有提供簡單的範例如下:

function detectBrowser() {
var useragent = navigator.userAgent; //取得userAgent屬性物件
var mapdiv = document.getElementById("map_canvas"); //取得地圖畫布

//判斷如果是來自iPhone或是Android手機裝置時,將畫布長寬設為100%
//若不是來自iPhone及Android裝置,則設為600*800大小的畫布
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}

這樣在手機的Web上看到的圖台就可以是滿版的畫面
如果是在iPhone上展示,可以在web程式的header裡加入下列meta資料
meta name="viewport" content="initial-scale=1.0, user-scalable=no"
使用此meta設定會指定以全螢幕顯示地圖，且使用者不得調整地圖大小

完整範例參考如下:

參考資料:http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/basics.html#Mobile

上述方法只適用於網頁開發~~

如果想針對手機裝置進行開發,最好還是用手機原生的Framework

在iPhone上有MapKit套件,在Android上有MapView可以使用
iPhone可以參考:http://developer.apple.com/library/ios/search/index.php?Search=map+kit

Android可以參考:http://developer.android.com/guide/topics/location/index.html