Podstawowe Mapy Google
Utwórz podstawową mapę Google
Ten przykład tworzy mapę Google wyśrodkowaną w Londynie w Anglii:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</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>
Pozostała część tej strony opisuje powyższy przykład krok po kroku.
Kontener mapy i rozmiar
Mapa potrzebuje elementu HTML do przechowywania mapy:
<div id="googleMap" style="width:100%;height:400px"></div>
Ustaw także rozmiar mapy.
Utwórz funkcję, aby ustawić 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);
}
Zmienna mapProp definiuje właściwości mapy.
Właściwość center określa, gdzie wyśrodkować mapę (przy użyciu współrzędnych szerokości i długości geograficznej).
Właściwość zoom określa poziom powiększenia mapy (spróbuj poeksperymentować z poziomem powiększenia).
Wiersz: var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); tworzy nową mapę wewnątrz elementu <div> z parametrem id="googleMap", używając przekazanych parametrów (mapProp).
Wiele map
Poniższy przykład definiuje cztery mapy z różnymi typami 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 witrynie na bezpłatne wywoływanie dowolnego interfejsu API Google tysiące razy dziennie.
Przejdź do https://developers.google.com/maps/documentation/javascript/get-api-key , aby dowiedzieć się, jak uzyskać klucz API.
Mapy Google spodziewają się znaleźć klucz interfejsu API w parametrze klucza podczas ładowania interfejsu API:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>