Google Map API 初體驗

最近在學習google map api v3，用搜尋找到了Google Maps JavaScript API 第 3 版  太好了~有中文的參考可以使用，打開了google map範例網頁使用他的hello word範例複製後貼上了default.aspx內頁，接著瀏覽..結果發現了..畫面是空白了，仔細看了一下說明，原來我必須把sensor這個值設為 true 或 false，不能直接照抄。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>

修改完畢後，我再去執行了一次，結果還是空白的....找了好久的問題....才發現

<div id="map_canvas" style="width: 100%; height: 100%"></div>

此處的官方說明為：

我們必須在網頁上預留顯示地圖的位置。通常，我們會建立名稱為 div 的元素，並取得瀏覽器文件物件模型 (DOM) 中此元素的參照。

在以上範例中，我們定義名稱為「map_canvas」的 <div>，並使用樣式 Attribute 來設定它的大小。請注意，div 大小已設定至 100%，因此展開時會剛好填滿行動裝置的螢幕。您可能需要根據瀏覽器螢幕大小和邊框間距，調整這些值。請注意，地圖大小一律取決於其所包含的元素，因此您必須為該 <div> 設定明確的大小。

經過我的測試..此處的地圖大小完全不能用%設定，不管將該地圖設為百分之多少都會無法顯示地圖的，必須設定為明確的大小(xx pt)例如： style="width:800pt; height:600pt"這才解決了地圖空白的冏境阿..