Podstawy Google Maps

Tworzenie podstawowej mapy Google

Ten przykład tworzy mapę Google z Londynem w Wielkiej Brytanii jako punktem centralnym:

Przykład

<!DOCTYPE html>
<html>
<body>
<h1>Moja pierwsza mapa Google</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>

Kolejno, krok po kroku przeanalizujemy powyższy przykład.

Kontener i rozmiar mapy

Mapa wymaga HTML elementu do przechowywania mapy:

<div id="googleMap" style="width:100%;height:400px"></div>

Należy również ustawić rozmiar mapy.

Utwórz funkcję do ustawienia właściwości mapy

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 Zmienna definiuje atrybuty mapy.

center Atrybut określa pozycję środka mapy (używa współrzędnych geograficznych).

zoom Atrybut określa poziom powiększenia mapy (spróbuj powiększyć mapę).

Spójrz na to zdanie:

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

Używa przekazanych parametrów (mapProp) utwórz nową mapę w elemencie <div> o id="googleMap".

Wiele map

Poniższy przykład definiuje cztery różne typy map:

Przykład

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

Darmowy klucz API Google

Google pozwala na darmowe wywoływanie dowolnych Google API, tysiące razy dziennie.

Odwiedź poniższy link, aby dowiedzieć się, jak uzyskać klucz API:

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

Google Maps musi być załadowany z kluczem API: key W parametrach znalazłem ten klucz API:

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