google map顯示不完全
google map api相關的資料和實作,網路上很多人都有po文了,就沒必要再去做重覆的使用說明,就寫下我遇到的問題吧。
1. 到Sign Up for the Google Maps API申請API鑰匙
2. 把這code
<script src="http://maps.google.com/maps?file=api&v=2&key=API鑰匙" type="text/javascript"></script>
放置到<head></head>之間
3. 將下述代碼放至網頁中
<div id="mymap" style="width: 500px; height: 500px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap2(document.getElementById("mymap")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); var pos = new GLatLng(25.037026,121.447624); map.setCenter(pos,16); var mark = new GMarker(pos); map.addOverlay(mark); map.openInfoWindow(map.getCenter(), document.createTextNode("AMC王品鑽石台北新莊直營門市")); //]]> </script>
4. 結果如圖所示,初開啟時顯示不完全,但若將網頁還原再最大化後,就會顯示正常(ie6和ie7有這問題,但firefox2沒有)
原因:
在網頁未完全載入前,即開始執行地圖顯示
修正:
1. 在<body>裡面增加onload和unload方法
<body onload="LoadStoreMap()" unload="GUnload()">
2. 把上述script代碼用function包起來
<div id="mymap" style="width: 500px; height: 500px"></div> <script type="text/javascript"> //<![CDATA[ function LoadStoreMap() { var map = new GMap2(document.getElementById("mymap")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); var pos = new GLatLng(25.037026,121.447624); map.setCenter(pos,16); var mark = new GMarker(pos); map.addOverlay(mark); map.openInfoWindow(map.getCenter(), document.createTextNode("AMC王品鑽石台北新莊直營門市")); } //]]> </script>
後記:原先參考別人資料時沒想那麼多,看來很簡單,就直接改來用,遇到這問題還覺得奇怪,怎麼ie不正常但firefox卻正常,就歸到ie的bug。
後來另外一個project要做動態的地址,搜到這篇文章使用google map api來做地址定位,看到它使用load和unload,才想到那個問題應該是載入未完全所致,果然,稍加修改就ok。
附註:查到很多google map的使用範例都是用v1版,要注意現在google給的script預設都是v2版。更進一步的實作,還是多看看官方文件吧。
靜態地圖這以後用得到,把這關鍵字記錄起來;另外也有人嚐試不使用API KEY來連結,挺有趣的也記一筆。
谢谢,经过提醒解决了我的问题,
謝謝您的教學~