Base di Google Maps

创建基础的谷歌地图

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

Esempio

<!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 Le variabili definiscono le proprietà della mappa.

center L'attributo specifica la posizione centrale della mappa (utilizza coordinate di latitudine e longitudine).

zoom L'attributo specifica il livello di zoom della mappa (prova a zoomare la mappa).

Guarda questa riga:

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

Utilizza i parametri passati (mapProp) creare una nuova mappa all'interno dell'elemento <div> con id="googleMap".

Mappature multiple

Esempio seguente definisce quattro mappe di diversi tipi di mappa:

Esempio

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

Chiave API di Google gratuita

Google permette ai siti web di chiamare gratuitamente qualsiasi API di Google, migliaia di volte al giorno.

Visita il seguente link per informazioni su come ottenere una chiave API:

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

Google Maps deve essere caricato con la chiave API: key Nella parametri trovare questa chiave API:

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