Ionic 3 & JavaScript SDK - Prikaz Google mape

Ionic 3 – Prikaz Google mape

Share Button

U ovom ću blog postu pokazati kako integrirati Google mape unutar Ionic aplikacije koristeći JavaScript SDK.

Zašto Google Maps?

Zato što je to najjednostavniji i najbolji način za prikaz mapa sa dosta mogućnosti i odličnom dokumentacijom + što je korištenje Google mapa besplatno do određene razine.

Native ili JavaScript SDK?

U ovom slučaju koristit ćemo JavaScript SDK jer nam je to brži i jednostavniji način za razvoj i testiranje. Znači, kako razvijamo funkcionalnosti Google mape unutar Ionic aplikacije istovremeno ih možemo testirati unutar web preglednika dok bi u slučaju korištenja Native SDK morali sve testirati na uređaju.

Pod pretpostavkom da već imate pokrenut Ionic projekt možemo krenuti dalje.

Prikaz Google mape

Za početak ćemo uvesti JavaScript SDK u index.html datoteku na način da dodamo <script> tag na sljedeći način

U slučaju da ne unesete Api Key dobit ćete poruku o grešci “Google Maps API warning: NoApiKeys“, ali će mape i dalje raditi.

Google Maps API warning: NoApiKeys

Sada se možemo prebaciti na stranicu u našoj Ionic aplikaciji koja će služiti za prikaz Google mape. U ovom slučaju to će biti home.html

ID "map" služi nam samo kako bi mogli napraviti sljedeće

Za sada još uvijek ne vidimo mapu jer nismo kontoleru rekli što da napravi, gdje i pomoću čega tj. naša datoteka home.ts trenutno izgleda ovako

Međutim, nakon što uvezemo dodatne elemente i kreiramo funkciju koja će prikazati zadanu mapu stanje će se promijeniti

Sada već možemo nešto konkretno vidjeti na ekranu. Imamo mapu koja prikazuje Vinkovce prema long i lat parametrima.

Ionic3 Google Maps

Dodavanje markera

Mapa prikazana na ranije definiran način nije pretjerano korisna i zato ćemo dodati markere kako bi se točnije znalo što želimo naglasiti i što zapravo prikazujemo. Za ovaj ću primjer odabrati četiri lokacije vezane uz grad Vinkovce i njih ću označiti na Google mapi.

Kada osvježimo ekran možemo vidjeti animirane markere za sve četiri lokacije.

Ionic3 Google Maps Markers

Dodatne informacije na markerima

Iako se ranije prikazana mapa već sada može smatrati donekle funkcionalnom ipak joj nedostaje jedan važan detalj, a to su informacije o tome što svaki pojedini marker točno prikazuje.

Zato ćemo sada za svaki marker napraviti skočni prozorčić koji će se prikazati kada se klikne na pojedini marker i na taj ćemo način prikazati naziv lokacije.

U nastavku možemo vidjeti markere s dodatnim informacijama u akciji
Ionic3 Google Maps Markers Info

Popis lokacija s fokusom

Sada ćemo napraviti popis lokacija koji će se nalaziti ispod same mape. Klikom na neku od lokacija mapa će se automatski pozicionirati na odabranu lokaciju.

Za početak ćemo napraviti malo mjesta ispod mape

Nakon toga napravit ćemo pripremu za ispis lokacija

I sada smo spremni za kreiranje funkcije koja će nam omogućiti fokus na odabranu lokaciju

Konačni rezultat je vidljiv u nastavku
Ionic3 Google Maps Markers Zoom

Zaključak

Ovo je samo dio onoga što se može postići koristeći Google Maps API. Dalje sve ovisi o specifičnim potrebama vaše Ionic aplikacije, ali vjerujem da možete postići sve što želite jer dokumentacija je poprilično detaljna i za svakoga se može pronaći nešto korisno.

Objavio

Tomislav Stanković

Web i mobile developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *