最新的Web開發教程
 

如何 - 谷歌地圖


了解如何將谷歌地圖添加到網頁。


基本網頁

所有的網頁都寫在HTML。

為了演示如何將谷歌地圖添加到網頁中,我們將使用一個簡單基本的網頁:

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map">My map will go here</div>

</body>
<html>
試一試»

設置地圖大小

設置地圖的大小:

<div id="map" style="width:400px;height:400px">
試一試»

添加谷歌API

地圖的功能是由位於谷歌一個JavaScript庫提供。

JavaScript庫可以在被加載<head> HTML頁的部分。

其實你可以刪除<head></head>標記。

<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
試一試»

創建地圖使用JavaScript

最後補充必要的JavaScript頁面:

var mapCanvas = document.getElementById("map");
var mapOptions = {
    center: new google.maps.LatLng(51.5, -0.2), zoom: 10
}
var map = new google.maps.Map(mapCanvas, mapOptions);
試一試»

例子解釋:

mapCanvas是地圖的HTML元素。

這個MapOptions是地圖的選項。

中心物業通過調用獲取(倫敦)的緯度和經度google.maps. LatLng() google.maps. LatLng()

Zoom屬性設置為10(嘗試變焦實驗)

所述google.maps.Map對象與mapCanvas和的MapOptions作為參數創建。

請訪問我們的谷歌地圖API教程 。 了解更多關於谷歌地圖。