Kako dodati Google Zemljevid na svojo spletno stran

01 od 05

Pridobite ključ API za Google Zemljevide za vašo spletno stran

Najboljši način za dodajanje Googlovega zemljevida na vaše spletno mesto je uporaba API-ja za Google Zemljevide. Google priporoča, da za uporabo zemljevidov dobite ključ API.

Za uporabo API-ja za Google Zemljevide v3 ne potrebujete ključa API, vendar je zelo uporaben, saj omogoča spremljanje vaše uporabe in plačilo dodatnega dostopa. Google Maps API v3 ima kvoto 1 zahtevo na sekundo na uporabnika do največ 25.000 zahtev na dan. Če vaše strani presegajo te omejitve, boste morali omogočiti zaračunavanje, da bi dobili več.

Kako priti do ključa API za Google Zemljevide

1. Prijavite se v Google z vašim Google Računom.
2. Odprite konzolo za razvijalce
3. Pomaknite se po seznamu in poiščite API Google Maps API v3, nato pa kliknite gumb "IZKLOP", da ga vklopite.
4. Preberite in se strinjate s pogoji.
5. Odprite konzolo API in v levem meniju izberite možnost »API Access«
6. V razdelku »Dostop enostavnega API-ja« kliknite gumb »Ustvari nov strežnik ...«.
7. Vnesite naslov IP svojega spletnega strežnika. To je IP, iz katerega bodo prihajale vaše zahteve za Zemljevide. Če svojega IP naslova ne poznate, ga lahko poiščete.
8. Kopirajte besedilo v vrstico "API ključ::" (brez navedenega naslova). To je vaš ključ API za vaše zemljevide.

02 od 05

Pretvarjanje vašega naslova v koordinate

Če želite uporabljati Google Zemljevide na svojih spletnih straneh, morate imeti geografsko širino in dolžino lokacije. Lahko jih dobite iz GPS-ja ali pa lahko uporabite spletno orodje, kot je Geocoder.us.

1. Pojdite na Geocoder.us in vnesite svoj naslov v iskalno polje.
2. Kopirajte prvo številko za širino (brez črke spredaj) in jo prilepite v besedilno datoteko. Ne potrebujete indikator stopnje (º).
3. Kopirajte prvo številko za dolžino (spet brez črke spredaj) in jo prilepite v svojo besedilno datoteko.

Vaša zemljepisna širina in dolžina bodo videti tako:

40.756076
-73,990838

Geocoder.us deluje le za naslove ZDA, če želite dobiti koordinate v drugi državi, poiskati podobno orodje v vaši regiji.

03 od 05

Dodajanje zemljevida na svojo spletno stran

Najprej dodajte skript zemljevida na

vašega dokumenta

Odprite svojo spletno stran in v glavi dokumenta dodajte naslednje.

Označeni del spremenite na številke širine in dolžine, ki ste jih zapisali v 2. koraku.

Drugič, dodajte element zemljevida na svojo stran

Ko imate vse elemente skripta dodane v glavo vašega dokumenta, morate na zemljevidu postaviti svoj zemljevid. To naredite tako, da dodate element DIV z atributom id = "map-canvas". Priporočam, da tudi to div razvrstite s širino in višino, ki bo ustrezala vaši strani:

Končno, nalaganje in testiranje

Zadnja stvar je, da naložite svojo stran in preverite, ali vaš zemljevid prikaže. Tukaj je primer Google zemljevida na strani. Upoštevajte, da zaradi načina delovanja CMS-a About.com boste morali klikniti povezavo, da se prikaže zemljevid. To ne bo na primeru vaše strani.

Če se vaš zemljevid ne prikaže, ga poskusite inicializirati z atributom BODY:

onload = "inicializiraj ()" >

Druge stvari, ki preverijo, ali vaš zemljevid ni natovorjen, vključujejo:

• Poiščite napake v vašem JavaScriptu, vključno s primerom. JavaScript je občutljiv na velike in male črke.
• Prepričajte se, da ste nastavili nastavitve za povečavo in sredino.
• Poskrbite, da je vaš DIV element na strani s pravilnim ID-jem.
• Poskrbite, da bo vaš element DIV višji.

04 od 05

Dodajanje oznake na zemljevid

Toda kakšen je zemljevid vaše lokacije, če ne obstaja označevalec, ki bi ljudem povedal kam naj gredo?

Če želite dodati standardni rdeči oznaki za Google Zemljevide, dodajte v skript pod spodnjo tabelo var = = ...:

var myLatlng = novo google.maps.LatLng ( zemljepisna širina, zemljepisna dolžina );
var marker = novo google.maps.Marker ({
položaj: myLatlng,
zemljevid: zemljevid,
naslov: " Nekdanji sedež podjetja About.com "
});

Označeno besedilo spremenite na zemljepisno širino in dolžino ter naslov, ki ga želite prikazati, ko ljudje premaknete nad oznako.

Če želite stran dodati čim več markerjev, samo dodajte nove spremenljivke z novimi koordinatami in naslovi, vendar če je zemljevid premajhen, da bi prikazali vse oznake, se ne bodo prikazovali, če bralnik ne bo zmanjkalo.

var latlng 2 = novo google.maps.LatLng ( 37,3316591, -122,0301778 );
var myMarker 2 = novi google.maps.Marker ({
položaj: latlng 2 ,
zemljevid: zemljevid,
naslov: " Apple Computer "
});

Tu je primer zemljevida Google z oznako. Upoštevajte, da zaradi načina delovanja CMS-a About.com morate klikniti povezavo, da se prikaže zemljevid. To ne bo na primeru vaše strani.

05 od 05

Dodajte drugo (ali več) zemljevid na svojo stran

Če ste pogledali moj primer zemljevida Google Zemljevidov, boste opazili, da imam na strani prikazanih več kot enega zemljevida. To je zelo enostavno storiti. Evo kako.

1. Pridobite zemljepisno širino in dolžino vseh zemljevidov, ki jih želite prikazati, kot smo se naučili v 2. koraku te vaje.
2. Vstavite prvi zemljevid, kot smo se naučili v 3. koraku te vaje. Če želite zemljevid imeti označevalec, dodajte oznako kot v 4. koraku.
3. Za drugi zemljevid morate v svoj skript initialize () dodati 3 nove vrstice:
   var latlng2 = novo google.maps.LatLng ( druge koordinate );
   var myOptions2 = {zoom: 18, središče: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = novo google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Če želite tudi oznako na novem zemljevidu, dodajte drugi marker, ki kaže na druge koordinate in drugi zemljevid:
   var myMarker2 = new google.maps.Marker ({position: latlng2 , mapa: map2 , naslov: " Naslov vašega označevalca "});
5. Nato dodajte drugo

   kjer želite drugi zemljevid. In poskrbite, da bo ID = "map_canvas_2" ID.

6. Ko se vaša stran naloži, se prikažeta dva zemljevida

Tu je oznaka strani z dvema Google zemljevidoma: