Google - Kako da ugradite Google Maps u vaš web sajt

Izgleda da svake nedelje neko izda barem jednu super stvar za Google Maps. Možda ste već videli veoma popularni Frappr servis koji je zasnovan na Google Maps. Nakon što je Google izdao API za njihov popularni Google Maps servis, integrisanje mape u vaš sajt nikada nije bilo lakše. Ovaj članak će vam pokazati kako da ugradite prilagođenu Google Map-u u vaš web sajt ili blog.

Pre nego što bilo šta uradite, kao i kod većine API zasnovanih web servisa, trebaćete da nabavite API ključ da biste mogli da koristite servis. Zato krenite na Google Maps stranicu i prijavite se za API ključ. Prijavljivanje je potpuno besplatno i dobićete API ključ čim kliknete na dugme Generate API Key.

Zatim treba da preuzmete gmapez.js fajl sa ovog web sajta i da ga kopirate negde na vaš web sajt. Kod koji će omogućiti da se mapa pojavi na vašem blogu ili web sajtu koristi iframe, tako da ćete trebati da napravite još jedan html fajl iz kojeg će iframe da čita podatke.

Ispod se nalazi kod koji treba da stavite u tu html stranicu; nekoliko stvari ćete trebati da promenite zato nastavite da čitate.

Ovo je osnovni kostur koda koji je potreban da bi Google Maps radio na vašem sajtu. Trebaćete da uneste vaš Google API ključ kao i validni URL ka vašem gmapez.js fajlu. Još jedna stvar je Google Maps link za područje koje želite da prikažete na mapi. Idite na maps.google.com i pronađite lokaciju koju želite da prikažete, dvostruko kliknite na nju a onda kopirajte link preko Link to this page koji se nalazi u gornjem desnom uglu Google Maps sajta.
Pejstujte taj URL u kod iznad teksta YOUR GOOGLE LINK. To će automatski centrirati mapu na marker date lokacije. Vi možete da kreirate nove markere tako što ćete kreirati više tagova. Postavljanje velikog slova između datih tagova će prikazati slovo kao marker umesto standardne tačke. Možete saznati više o različitim konfiguracijama na GMap EZ sajtu.

Prelazimo na ubacivanje koda u vaš sajt. Kod koji je prikazan ispod ide na izabrani blog post ili stranicu web sajta. Postarajte se da ubacite odgovarajući URL u html stranicu koja sadrži kod koji smo vam dali gore.


Dodavanje info oblačića

Hajde sada da malo začinimo sve to. Sledeće što možete da uradite je da dodate oblačić sa informacijama vašim markerima. To lako možete da uradite tako što ćete dodati div tag koji sadrži informaciju koju želite da prikažete odmah nakon odgovarajućeg taga (sve unutar glavnog div-a koji ima GMapEZ klasu). Vi možete da dodate čak i slike baš kao što biste ih dodali u bilo koji drugi htnl fajl. Sledi primer.

Napomena: ovo je samo primer i ne vodi ka postojećoj slici.

Specifikovanje tipa mape

Svaki put kada se vaša stranica koja sadrži Google Map otvori, vi možete da odredite koji pogled će korisnik da dobije. Idite u html fajl koji ste kreirali i pronađite prvu sekciju div taga; ona se naalzi odmah nakon body taga. Sve što treba da uradite je da dodate jedan od sledećih tagova tamo gde piše
class=”GMapEZ GLargeMapControl GMapTypeControl GScaleControl”.

Ovo su tagovi koje možete da upotrebite: G_MAP_TYPE, G_SATELLITE_TYPE, G_HYBRID_TYPE. Prvi prikazuje najuobičajeniji pogled na mapu, zatim sledi satelitski pogled i konačno sledi hibridni, koji prikazuje mapu preko satelistkog pogleda.
Na primer, kod u vašem html-u mođe da izgleda ovako nakon što ste mu dodali tag.
For example the code in your html should look like this after you’ve added a tag.


Različite kontrole mape

Vi možete da koristite tri veličine kontrola: velike, male i mini kontrole. Da biste koristili male kontrole promenite div klasu u class=”GMapEZ GSmallMapControl” umesto aktuelne vrednosti class=”GMapEZ GLargeMapControl GMapTypeControl GScaleControl”. Mini kontrole mogu da se postave sa class=”GMapEZ GSmallZoomControl GSmallMapTypeControl”.

Auto Open marker Info

Možete da napravite da se automatski otvori marker kada se učita mapa (za razliku od otvaranja kada se klikne na njega) tako što ćete postaviti OPEN unutar tagova za dati marker.