谷歌地圖基礎

創建基礎的谷歌地圖

此例創建以英國倫敦為中心的谷歌地圖：

實例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一個谷歌地圖</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>

接下來 ，我們會一步步研究上面這個例子。

地圖容器和尺寸

地圖需要一個 HTML 元素來存放地圖：

<div id="googleMap" style="width:100%;height:400px"></div>

同時還要設置地圖的大小。

創建一個函數來設置地圖屬性

function myMap() {
var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

mapProp 變量定義地圖的屬性。

center 屬性規定地圖的中心位置（使用緯度和經度坐標）。

zoom 屬性規定地圖的縮放級別（請嘗試縮放地圖）。

請看這一行：

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

它用了傳遞的參數 (mapProp) 在 id="googleMap" 的 <div> 元素內創建一個新地圖。

多個地圖

下面的例子定義了四個不同地圖類型的地圖：

實例

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);

免費的 Google API Key

Google 允許網站免費調用任意 Google API，每天數千次。

請訪問以下鏈接，了解如何獲得 API key：

https://developers.google.com/maps/documentation/javascript/get-api-key

谷歌地圖需要在加載 API 時在 key 參數中找到這個 API 密鑰：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>