什么是谷歌地图?

HTML

Google 地图是一种 Google API

Google 字体是一种 Google API

Google Charts 是一个 Google API


了解如何将 Google 地图添加到您的网页。



我的第一个谷歌地图

从一个简单的网页开始。

在您希望地图显示的位置添加 <div> 元素,并设置地图的大小:

实例

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map" style="width:100%;height:400px;">My map will go here</div>

</body>
<html>

添加一个JavaScript函数来显示地图:

实例

function myMap() {
    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 变量定义地图的属性。

center 属性指定地图的中心位置(使用纬度和经度坐标)。

zoom 属性指定地图的缩放级别(尝试使用缩放级别)。

google.maps.Map 对象是使用 mapCanvas 和 mapOptions 作为参数创建的。



最后添加 Google API

地图的功能由位于 Google 的 JavaScript 库提供:

实例

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

谷歌地图教程

在我们的 Google 地图教程中了解有关 Google 地图的更多信息。