Google Maps 基礎
建立基本的 Google 地圖
本示例將建立一個以英格蘭倫敦為中心的 Google 地圖
示例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一個 Google 地圖</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); 在 id="googleMap" 的 <div> 元素內建立一個新地圖，使用傳遞的引數（mapProp）。
多個地圖
下面的示例定義了四種不同地圖型別的地圖
示例
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 金鑰
Google 允許網站每天免費呼叫任何 Google API 數千次。
前往 https://developers.google.com/maps/documentation/javascript/get-api-key 瞭解如何獲取 API 金鑰。
Google Maps 在載入 API 時，期望在 key 引數中找到 API 金鑰
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
