google maps javascript官方文檔：https://developers.google.com/maps/documentation/javascript/
在創建地圖之前，我們進入 Google Developers Console創建一個key，用於我們開發地圖的身份驗證（當然，沒有key也可以進行接下來的教程）
創建一個簡單的地圖：
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
//地圖的樣式
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
//創建一個地圖
map = new google.maps.Map(document.getElementById('map'), {
//設置地圖的中心點經緯度
center: {lat: 34, lng: 112},
//設置地圖的縮放級別(0~21)
zoom: 8
});
}
//google maps javascript API,如果已經創建了key,則可將key後邊的YOUR_API_KEY替換爲你所得到的key，
//如果沒有key，則可以將 "key=YOUR_API_KEY&callback=initMap"這段代碼去掉即可
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html> |
使用上述代碼，則可以創建一個地圖了。
如果因爲網絡問題，無法訪問google服務器，則可以將“maps.googleapis.com/maps/api/js”換爲“maps.google.cn/maps/api/js”試一下
創建地圖的構造函數原型：Map(mapDiv:Node,opts?:MapOptions)
上述代碼中的center和zoom就是MapOptions中的兩個屬性，比較常用的還有：
draggable：bool類型，控制地圖是否可以拖動
mapTypeId：HYBRID／ROADMAP／SATELLITE／TERRAIN，四種地圖的類型，可以自己動手試下效果
mapTypeControl：bool類型，是否顯示可以改變地圖類型的控件
maxZoom：設置地圖最大縮放等級
minZoom：設置地圖最小縮放等級
zoomControl：bool類型，是否顯示可以改變地圖大小的控件