Kako dodati Google mapu na svoju veb stranicu

01 od 05

Preuzmite ključni ključ Google Maps za vašu web lokaciju

Najbolji način da dodate Google mapu na vašu veb lokaciju je da koristite Google Maps API. Google preporučuje da dobijete API ključ kako biste koristili mape.

Nije vam potrebno da dobijete API ključ da koristite Google Maps API v3, ali je veoma korisno jer vam omogućava da nadgledate svoju upotrebu i platite dodatni pristup. Google Maps API v3 ima kvotu od 1 zahteva u sekundi po korisniku do maksimalno 25.000 zahteva dnevno. Ako vaše stranice prelaze ta ograničenja, moraćete da omogućite fakturisanje kako biste dobili više.

Kako dobiti Google Maps API ključ

1. Prijavite se na Google pomoću Google naloga.
2. Idite u konzolu za programere
3. Pomerite se kroz listu i pronađite Google Maps API v3, a zatim kliknite na dugme "OFF" da biste je uključili.
4. Pročitajte i slažete se sa uslovima.
5. Idite na konzolu API-ja i odaberite "API Access" iz levog menija
6. U odeljku "Jednostavan pristup API-u" kliknite na dugme "Kreiraj novi server ključ ...".
7. Unesite IP adresu vašeg web servera. Ovo je IP adresa u kojoj će potražiti Mape. Ako ne znate svoju IP adresu, možete je potražiti.
8. Kopirajte tekst na liniju "API ključ:" (ne uključujući tu titulu). Ovo je vaš API ključ za vaše mape.

02 od 05

Pretvorite svoju adresu u koordinate

Da biste koristili Google mape na vašim web stranicama, morate imati geografsku širinu i dužinu za lokaciju. Možete ih nabaviti iz GPS-a ili možete koristiti online alat kao što je Geocoder.us.

1. Idite na Geocoder.us i upišite svoju adresu u polje za pretragu.
2. Kopirajte prvi broj za širinu (bez slova ispred) i zalepite je u tekstualnu datoteku. Ne treba vam pokazatelj stepena (º).
3. Kopirajte prvi broj za dužinu (opet bez pisma ispred) i zalepite je u vašu tekstualnu datoteku.

Vaša geografska širina i dužina izgledaju ovako:

40.756076
-73.990838

Geocoder.us radi samo za adrese u SAD-u, ukoliko želite da dobijete koordinate u drugoj zemlji, trebalo bi da tražite sličnu alatku u vašem regionu.

03 od 05

Dodavanje Mape na Veb stranicu

Prvo, dodajte skriptu mapu na

Vašeg dokumenta

Otvorite svoju web stranicu i dodajte sledeće u GLAVU vašeg dokumenta.

Promenite označeni deo na brojeve geografske širine i dužine koje ste napisali u drugom koraku.

Drugo, dodajte element karte na stranicu

Kada imate sve elemente skripte dodate u HEAD vašeg dokumenta, potrebno je da postavite svoju mapu na stranicu. To činite dodavanjem DIV elementa sa id = "map-canvas" atributom. Preporučujem vam da oblikujete ovaj div sa širinom i visinom koja će se uklapati na vašu stranicu:

Konačno, Upload and Test

Poslednja stvar je da otpremite vašu stranicu i testirate svoju kartu. Evo primera Google mape na stranici. Imajte na umu, zbog načina na koji funkcioniše About.com CMS, morate kliknuti na vezu da biste dobili mapu koja će se pojaviti. Ovo neće biti slučaj na vašoj stranici.

Ako se vaša mapa ne pojavi, pokušajte da je inicijalizujete sa atributom BODY:

onload = "initialize ()" >

Ostale stvari koje bi provjerile da li se vaša mapa ne učitava uključuju:

• Potražite grešku u vašem JavaScriptu, uključujući slučaj. JavaScript je osjetljiv na slovo.
• Uverite se da imate postavke zuma i centra.
• Uverite se da je vaš DIV element na stranici sa ispravnim ID-om.
• Pobrinite se da vaš DIV element ima visinu.

04 od 05

Dodajte marker na svoju mapu

Ali, koja je dobra karta vaše lokacije ako nema markera koji govori ljudima gde treba da idu?

Da biste dodali standardni crveni marker za Google mape, dodajte u skriptu ispod var mape = ... linija:

var myLatlng = novi google.maps.LatLng ( geografska širina, dužina );
var marker = novi google.maps.Marker ({
pozicija: myLatlng,
karta: mapa,
naslov: " bivši headquarters "
});

Promenite označeni tekst na svoju geografsku širinu i dužinu i naslov koji želite da se pojavljuje kada ljudi prelaze preko markera.

Možete dodati što više markera na stranicu koliko želite, samo dodajte nove varijable novim koordinatama i naslovima, ali ako je mapa premala da bi prikazala sve markere, neće se prikazivati ​​ako čitatelj ne izostavi.

var latlng 2 = novi google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = novi google.maps.Marker ({
položaj: latlng 2 ,
karta: mapa,
naslov: " Apple Computer "
});

Evo primera Google mape sa markerom. Imajte na umu, zbog načina na koji funkcioniše About.com CMS, morate kliknuti na vezu da biste prikazali mapu. Ovo neće biti slučaj na vašoj stranici.

05 od 05

Dodajte drugu (ili više) kartu na vašu stranicu

Ako ste pogledali na moj primer Google mape, primetićete da na stranici ima više od jedne mape. Ovo je vrlo lako učiniti. Evo kako.

1. Preuzmite geografsku širinu i dužinu svih mapa koje želite prikazati, kako smo saznali u 2. koraku ovog vodiča.
2. Ubacite prvu mapu kako smo saznali u 3. koraku ovog vodiča. Ako želite da mapa ima marker, dodajte marker kao u koraku 4.
3. Za drugu mapu, potrebno je dodati 3 nove linije u vaš script initialize ():
   var latlng2 = novi google.maps.LatLng ( drugi koordinati );
   var myOptions2 = {zoom: 18, centar: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = novi google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Ako želite i marker na novoj mapi, dodajte drugi marker koji pokazuje na druge koordinate i drugu mapu:
   var myMarker2 = novi google.maps.Marker ({položaj: latlng2 , mapa: mapa2 , naslov: " Vaš naziv markera "});
5. Zatim dodajte drugu

   gde želite drugu kartu. I obavezno navedite ID = "map_canvas_2" ID.

6. Kada se vaša stranica učita, prikazaće se dve mape

Evo šifre stranice sa dve Google karte na njemu: