Tworzenie mapy zasadniczej Google
Ten przykład tworzy mapy Google skoncentrowany w Londynie:
Przykład
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Spróbuj sam " Reszta tej stronie opisuje powyższy przykład, krok po kroku.
1. Załaduj API Google
Google Maps API jest biblioteką JavaScript. Może być dodany do strony internetowej z <script> tagu:
<script src="http://maps.googleapis.com/maps/api/js"></script>2. Set Mapa Właściwości
Tworzenie funkcji zainicjować mapę:
function initialize() {
}W funkcji zainicjować utworzenie obiektu (mapProp) do określenia właściwości mapie:
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};Obiekt Centrum określa gdzie wyśrodkować mapę. Tworzenie długość i szerokość geograficzną obiektu, aby wyśrodkować mapę na konkretnym punkcie. Przekazać współrzędne w kolejności: szerokość i długość geograficzną.
Właściwość określa poziom zoom zoom na mapie. zoom: 0 pokazuje mapa Ziemi pełne oddalenie. Wyższe poziomy powiększenia powiększać w wyższej rozdzielczości.
Nieruchomość mapTypeId określa typ mapy, aby wyświetlić. Obsługiwane są następujące typy map:
- PLAN (normal, default 2D map)
- SATELITARNEJ (photographic map)
- HYBRID (photographic map + roads and city names)
- TERRAIN (map with mountains, rivers, etc.)
3. Tworzenie mapy Container
Tworzenie <div> elementu do przechowywania map. Za pomocą CSS do wielkości, element:
<div id="googleMap" style="width:500px;height:380px;"></div>Mapa zawsze "inherit" jego rozmiar od elementu pojemnika.
4. Tworzenie obiektu mapy
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);Powyższy kod tworzy nową mapę wewnątrz <div> elementu o id = "kalkulacji", za pomocą parametrów, które są przekazywane (mapProp) .
5. Dodać detektor zdarzeń załadować mapę
Dodaj słuchacza DOM, który będzie wykonywał initialize() funkcji obciążenia okna (when the page is loaded) :
google.maps.event.addDomListener(window, 'load', initialize);
Ładowanie asynchronicznie
Możliwe jest również, aby załadować API Map Google na żądanie.
Poniższy przykład używa window.onload załadować Google Maps API po stronie w pełni załadowany.
loadScript() Funkcja ta tworzy API Map Google <script> tag. Ponadto callback = zainicjować parametr jest dodawany na końcu adresu URL do wykonania initialize() funkcję po API jest w pełni załadowany:
Przykład
function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Spróbuj sam " Wiele mapy
Poniższy przykład definiuje cztery mapy na jednej stronie internetowej (cztery mapy z różnymi rodzajami map):
Przykład
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);
Spróbuj sam " Klucz API Google
Google pozwala na swojej stronie internetowej, aby wywołać dowolną Google API, wiele tysięcy razy dziennie.
Jeśli planujesz dla cięższego ruchu, należy uzyskać darmowy klucz API Google.
Idź do https://console.developers.google.com uzyskać darmowy klucz.
Mapy Google spodziewa się znaleźć klucz API w kluczowym parametrem przy ładowaniu API:
<script src="http://maps.googleapis.com/maps/api/js? key=YOUR_KEY "></script>