第一个Google map 的数据地图

Google Maps API - 第一個範例在網頁嵌入 Google Map

在生成 Google Maps API Key 的頁面會看到 Google Maps API 的第一個範例，如下︰

 

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

2   

3 <html xmlns="http://www.w3.org/1999/xhtml">  

4   

5   <head>  

6   

7     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>  

8   

9     <title>Google Maps JavaScript API Example</title>  

10   

11     <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAG_4i2swR3KOd-nGYrlrt8RTkyS8SRe_kYPTAbwTumvAqao01PRRUcCtCzTBnNH2kRURGR8RhQQoZ3w" type="text/javascript"></script>  

12   

13     <script type="text/javascript">  

14   

15     //<![CDATA[ 

16  

17  

18  

19     function load() { 

20  

21       if (GBrowserIsCompatible()) { 

22  

23         var map = new GMap2(document.getElementById("map")); 

24  

25         map.setCenter(new GLatLng(37.4419, -122.1419), 13); 

26  

27       } 

28  

29     } 

30  

31  

32  

33     //]]>  

34   

35     </script>  

36   

37   </head>  

38   

39   <body onload="load()" onunload="GUnload()">  

40   

41     <div id="map" style="width: 500px; height: 300px"></div>  

42   

43   </body>  

44   

45 </html>  

http://maps.google.com/maps?file=api&v=2&key=XXXXXX 其中 key= 後面就是你所取得的 Google Maps API Key。

<div id="map" style="width: 500px; height: 300px"></div> 用來擺置 Google Map，其中 style="width: 300px; height:300px" 則是指定地圖區塊大小。

GBrowserIsCompatible() 判斷 Google Maps API 是否可用於當前的瀏覽器中，如當前瀏覽器支援 Google Maps API 則回傳 true。

var map = new GMap2(document.getElementById("map")); 宣告一個 GMap 物件，其中 "map" 就是先前用來擺置 Google Map 所宣告 div 標籤的 id。

map.setCenter(new GLatLng(37.4419, -122.1419), 13); 將地圖的中心點設定在經度 37.4419 和緯度 -122.1419，而 Zoom Level 在這範例中設成 13（1 為最大，數字越大 Zoom Level 越小）。在這或許會有個疑問，要怎麼知道某個地點的經緯度？可以利用 Google Map 找到要的地點固定在中間，然後按下『連結至此網頁』 URL 上就有該點的經緯度了，例如 http://maps.google.com/maps?ie=UTF8&ll=25.08532,121.561498&spn=0.291039,0.6427&z=11 紅字部分就是該點的經緯度。在往後的教學中會再介紹如何運用 Google Maps API 取得經緯度。

<body onload="load()" onunload="GUnload()"> 釋放 Google Maps API，在這要注意的是應在頁面的 unload 事件處理程序中使用此函數，不可在 Google Maps API 執行中使用。

转载于:https://www.cnblogs.com/j3eee/archive/2009/03/09/1407327.html