Fondamentaux des cartes Google

创建基础的谷歌地图

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

Exemple

<!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 Les variables définissent les attributs de la carte.

center L'attribut détermine la position centrale de la carte (utilisez les coordonnées de latitude et de longitude).

zoom L'attribut détermine le niveau de zoom de la carte (essayez de zoomer sur la carte).

Voyez cette ligne :

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

Il utilise les paramètres passés (mapProp) créer une nouvelle carte dans l'élément <div> avec l'id="googleMap".

Plusieurs cartes

Les exemples suivants définissent quatre types de cartes de cartes différents :

Exemple

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

Clé API Google gratuite

Google permet aux sites Web d'appeler gratuitement n'importe quel API Google, plusieurs milliers de fois par jour.

Veuillez visiter le lien suivant pour en savoir plus sur la manière d'obtenir une clé API :

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

Google Maps doit être appelé lors du chargement de l'API dans : key Trouver cette clé API dans les paramètres :

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