開始需要一個包含地圖的HTML元素。你可以在這個元素中添加JavaScript不可用或者浏覽器不支援的時候要顯示的内容。這個内容可以是任何的HTML、文本,甚至同一地圖的一個靜态圖檔。後者是一個比較好的選擇,可以確定向後相容;你隻需要確定不要在文本中的任何地方告訴使用者地圖是動态的就可以了,因為它可能會不是動态的。
exampleGoogleMaps.html (摘錄)
<div id="map">
<p>Here you should see an interactive map, but you
either have scripting disabled or your browser
is not supported by Google Maps.</p>
</div>
確定你在CSS中已經給出了那個元素的尺寸,因為不然的話地圖會顯得很沒有規律。
googleMaps.css
#map{
width:400px;
height:300px;
border:1px solid #999;
margin:1em;
}
要把地圖添加到你的HTML文檔中,需要在你像前面說明的那樣添加主要的Google地圖代碼之後嵌入下面的腳本(包含檔案或者放到SCRIPT元素中)。
googleMaps.js
function addMap() {
if ( GBrowserIsCompatible() ) {
var mapContainer = document.getElementById( 'map' );
var map = new GMap2( mapContainer );
var point = new GLatLng( 51.5623, -0.0934 );
map.setCenter( point, 13 );
window.onload = addMap;
window.onunload = GUnload;
API的GBrowserIsCompatible()函數會檢查浏覽器是否支援Google地圖,如果是的話則傳回true。在文檔加載完成後,你可以調用自己的函數addMap(),當文檔關閉的時候,調用API提供的GUnload()函數(因為關閉視窗會觸發unload事件)。後者是必需的,因為這個地圖使用了許多的事件處理,這可能會使得MSIE由于記憶體溢出的問題變得比較慢。
■提示:在[url]http://javascript.weblogsinc.com/2005/03/07/javascript-memory-leaks/[/url]上,你可以學習到更多有關MSIE記憶體溢出的東西以及其解決辦法。
本文轉自 牛海彬 51CTO部落格,原文連結:http://blog.51cto.com/newhappy/76852,如需轉載請自行聯系原作者