Creați o hartă de bază Google
Acest exemplu creează o hartă Google centrat în Londra, Anglia:
Exemplu
<!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>
Încearcă - l singur » Restul acestei pagini descrie exemplul de mai sus, pas cu pas.
1. Încărcați API-ul Google
API Google Maps este o bibliotecă JavaScript. Acesta poate fi adăugat la o pagină web cu un <script> tag - ul:
<script src="http://maps.googleapis.com/maps/api/js"></script>2. Setați Harta Proprietăți
Creați o funcție pentru a inițializa harta:
function initialize() {
}În funcția initialize, creați un obiect (mapProp) pentru a defini proprietățile hărții:
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};Proprietatea centru specifică în cazul în care pentru a centra harta. Crearea unui obiect LatLng pentru a centra harta pe un anumit punct. Trece coordonatele în ordinea: latitudine, longitudine.
Proprietatea de zoom specifică nivelul de zoom pentru harta. Zoom: 0 arată o hartă a Pământului panoramări. Niveluri mai ridicate de zoom zoom la o rezoluție mai mare.
Proprietatea mapTypeId specifică tipul de hartă pentru a afișa. Următoarele tipuri de hărți sunt suportate:
- FOAIE DE PARCURS (normal, default 2D map)
- SATELIT (photographic map)
- HYBRID (photographic map + roads and city names) de (photographic map + roads and city names)
- TERENUL (map with mountains, rivers, etc.)
3. Creați un container Harta
Creați un <div> element de a deține hartă. Utilizați CSS pentru dimensiunea elementului:
<div id="googleMap" style="width:500px;height:380px;"></div>Harta va fi întotdeauna "inherit" dimensiunea sa de la elementul său container.
4. Crearea unui obiect Harta
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);Codul de mai sus creează o nouă hartă în interiorul <div> elementul cu id = „googlemap“, folosind parametrii care sunt transmise (mapProp) .
5. Adăugați o de evenimente pentru a încărca harta
Adăugați un ascultător DOM care va executa initialize() funcția de încărcare pe fereastră (when the page is loaded) :
google.maps.event.addDomListener(window, 'load', initialize);
Se încarcă asincronă
Este de asemenea posibil pentru a încărca API-ul Google Maps la cerere.
Exemplul de mai jos folosește window.onload pentru a încărca Google Maps API după ce pagina a fost complet încărcată.
loadScript() funcția creează Google Maps API <script> tag - ul. În plus, callback = inițializarea parametru este adăugat la sfârșitul URL - ului pentru a executa initialize() funcția după API este complet încărcat:
Exemplu
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;
Încearcă - l singur » Hărți multiple
Exemplul de mai jos definește patru hărți pe o pagină web (patru hărți cu diferite tipuri de hărți):
Exemplu
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);
Încearcă - l singur » Cheia Google API
Google permite site-ul web pentru a apela orice API-ul Google, de multe mii de ori pe zi.
Dacă aveți de gând pentru trafic mai grele, ar trebui să obțineți o cheie API gratuit de la Google.
Du - te la https://console.developers.google.com pentru a obține o cheie liberă.
Hărți Google se așteaptă să găsească cheia API în parametrul cheie atunci când încărcarea unui API:
<script src="http://maps.googleapis.com/maps/api/js? key=YOUR_KEY "></script>