擁有一個免費的API Key之后就可以正式調用Google的API了進行開發了。
創建一個簡單的 Google 地圖,以下是顯示了英國倫敦的 Google 地圖：
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
效果如如下:(可以拷貝直接運行,當然你要能夠訪問Google)
現在對針對上面的例子進行分析如下:
(1) 添加 Google 地圖 API Key
在上面實例中第一個<script> 標簽中必須包含 Google 地圖 API：
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script>
調用類型是下面的方式,包含兩個參數：
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
將google生成的 API key 放置於 key 參數中(key=YOUR_API_KEY)。
The sensor 參數是必須的，該參數用於指明應用程序是否使用一個傳感器 (類似 GPS 導航) 來定位用戶的位置。參數值可以設置為 true 或者 false。
HTTPS:
如果你的應用是安全的HTTP(HTTPS:HTTP Secure)應用,你可以使用 HTTPS 來加載 Google 地圖 API：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
異步加載:
同樣我們也可以在頁面完全載入后再加載 Google 地圖 API。
以 下實例使用了 window.onload 來實現頁面完全載入后加載 Google 地圖 。 loadScript() 函數創建了加載 Google 地圖 API <script> 標簽。此外在標簽的末尾添加了 callback=initialize 參數， initialize()作為回調函數會在API完全載入后執行：
function loadScript() { var script = document.createElement("script"); script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript;
(2) 定義地圖屬性
在初始化地圖前，我們需要先創建一個 Map 屬性對象來定義一些地圖的屬性：
var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP };
enter（中心點）
中心屬性指定了地圖的中心，該中心通過坐標（緯度，經度）在地圖上創建一個中心點。
Zoom（縮放級數）
zoom 屬性指定了地圖的 縮放級數。zoom: 0 顯示了整個地球地圖的完全縮放。
MapTypeId（地圖的初始類型）
mapTypeId 屬性指定了地圖的初始類型。
mapTypeId包括如下四種類型：
- google.maps.MapTypeId.HYBRID：顯示衛星圖像的主要街道透明層
- google.maps.MapTypeId.ROADMAP：顯示普通的街道地圖
- google.maps.MapTypeId.SATELLITE：顯示衛星圖像
- google.maps.MapTypeId.TERRAIN：顯示帶有自然特征（如地形和植被）的地圖
(3) 在哪里顯示 Google 地圖
通常 Google 地圖使用於 <div> 元素中：
<div id="googleMap" style="width:500px;height:380px;"></div>
注意： 地圖將以div中設置的大小來顯示地圖的大小，所以我們可以在 <div> 元素中設置地圖的大小。
(4) 創建一個 Map 對象
var map=new google.maps.Map(document.getElementById("googleMap") ,mapProp);
以上代碼使用參數(mapProp)在<div> 元素 (id為googleMap) 創建了一個新的地圖。
提示：如果想在頁面中創建多個地圖，你只需要添加新的地圖對象即可。
以下實例定義了四個地圖實例 (四個地圖使用了不同的地圖類型):
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2); var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3); var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
(5) 加載地圖
窗口載入后通過執行 initialize() 函數來初始化 Map 對象，這樣可以確保在頁面完全載入后再加載 Google 地圖：
google.maps.event.addDomListener(window, 'load', initialize);
附上地圖Map() 構造器的使用方法及API:
例如要創建一個 Google 地圖:
var map=new google.maps.Map(document.getElementById("googleMap"),mapOpt);
定義和用法
Map() 構造器創建了一個新的地圖並插入到指定的HTML元素中（<div> 元素)。
語法
參數值
| 參數 | 描述 |
|---|---|
| HTMLElement | 規定要把地圖放置在那個 HTML 元素中。 |
| MapOptions | 帶有地圖初始化變量/選項的 MapOptions 對象。 |
Map() 的方法
| 方法 | 返回值 | 描述 |
|---|---|---|
| fitBounds(LatLngBounds) | None | 設置要包含給定邊界的視口。 |
| getBounds() | LatLng,LatLng | 返回當前視口的西南緯度/經度和東北緯度/經度。 |
| getCenter() | LatLng | 返回地圖的中心的緯度/經度。 |
| getDiv() | Node | 返回包含地圖的 DOM 對象。 |
| getHeading() | number | 返回航拍圖像的羅盤航向（支持 SATELLITE 和 HYBRID 地圖類型）。 |
| getMapTypeId() | HYBRID ROADMAP SATELLITE TERRAIN | 返回當前地圖類型。 |
| getProjection() | Projection | 返回當前 Projection（投影）。 |
| getStreetView() | StreetViewPanorama | 返回綁定到地圖的默認的 StreetViewPanorama。 |
| getTilt() | number | 返回航拍圖像的入射角度數（支持 SATELLITE 和 HYBRID 地圖類型）。 |
| getZoom() | number | 返回地圖的當前縮放級別。 |
| panBy(xnumber,ynumber) | None | 通過以像素計的給定距離改變地圖的中心。 |
| panTo(LatLng) | None | 改變地圖的中心為給定的 LatLng。 |
| panToBounds(LatLngBounds) | None | 將地圖平移所需的最小距離以包含給定的 LatLngBounds。 |
| setCenter(LatLng) | None | |
| setHeading(number) | None | 設置航拍圖像的羅盤方向（以度為單位進行測量），基本方向為北方。 |
| setMapTypeId(MapTypeId) | None | 改變要顯示的地圖類型。 |
| setOptions(MapOptions) | None | |
| setStreetView(StreetViewPanorama) | None | 綁定一個 StreetViewPanorama 到地圖上。 |
| setTilt(number) | None | 設置航拍圖像的入射角度數（支持 SATELLITE 和 HYBRID 地圖類型）。 |
| setZoom(number) | None |
Map() 的屬性
| 屬性 | 類型 | 描述 |
|---|---|---|
| controls | Array.<MVCArray.<Node>> | 要附加到地圖上的額外控件。 |
| mapTypes | MapTypeRegistry | 按字符串 ID 划分的 MapType 實例的注冊表。 |
| overlayMapTypes | MVCArray.<MapType> | 要疊加的額外地圖類型。 |
Map() 的事件
| 事件 | 參數 | 描述 |
|---|---|---|
| bounds_changed | None | 當可視區域范圍更改時會觸發此事件。 |
| center_changed | None | 當地圖 center（中心）屬性更改時會觸發此事件。 |
| click | MouseEvent | 當用戶點擊地圖（但不是點擊標記或信息窗口）時會觸發此事件。 |
| dblclick | MouseEvent | 當用戶雙擊地圖時會觸發此事件。請注意，觸發此事件前還會觸發點擊事件。 |
| drag | None | 當用戶拖動地圖時會反復觸發此事件。 |
| dragend | None | 當用戶停止拖動地圖時會觸發此事件。 |
| dragstart | None | 當用戶開始拖動地圖時會觸發此事件。 |
| heading_changed | None | 當地圖 heading（方向）屬性更改時會觸發此事件。 |
| idle | None | 當地圖在平移或縮放之后變為閑置狀態時會觸發此事件。 |
| maptypeid_changed | None | 當 mapTypeId 屬性更改時會觸發此事件。 |
| mousemove | MouseEvent | 只要用戶的鼠標在地圖容器上移動，就會觸發此事件。 |
| mouseout | MouseEvent | 當用戶的鼠標從地圖容器上退出時會觸發此事件。 |
| mouseover | MouseEvent | 當用戶的鼠標進入地圖容器時會觸發此事件。 |
| projection_changed | None | 當投影更改時會觸發此事件。 |
| resize | None | 當地圖（div）更改尺寸時會觸發此事件。 |
| rightclick | MouseEvent | 當用戶右擊地圖時會觸發此事件。 |
| tilesloaded | None | 當可見圖塊載入完成后會觸發此事件。 |
| tilt_changed | None | 當地圖 tilt（傾斜）屬性更改時會觸發此事件。 |
| zoom_changed | None | 當地圖 zoom（縮放）屬性更改時會觸發此事件。 |