Google Maps Basis

创建基础的谷歌地图

此例创建以英国伦敦为中心的谷歌地图：

Voorbeeld

<!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 Variabelen definiëren de eigenschappen van de kaart.

center Eigenschap bepaalt de centrale positie van de kaart (gebruik breedte- en lengtegraadcoördinaten).

zoom Eigenschap bepaalt het zoomniveau van de kaart (probeer de kaart te zoomen).

Kijk naar deze regel:

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

Het gebruikt de doorgegeven parameters (mapProp) Een nieuwe kaart maken binnen het <div> element met id="googleMap".

Meerdere kaarten

De volgende voorbeelden definiëren vier verschillende kaarttypen:

Voorbeeld

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);

Gratis Google API Key

Google staat het gebruik van Google API's door websites gratis toe, duizenden keren per dag.

Bezoek de volgende link om te leren hoe je een API key kunt verkrijgen:

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

Google Maps moet de API laden in key Parameters vinden deze API-sleutel:

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