Ionic 3 - Google Maps upute

Ionic 3 & Google Maps – prikaz rute između dvije lokacije

U ovom ću blog postu koristiti Google Maps Directions API za prikaz rute od jedne do druge lokacije. Također, ovaj će blog post biti vrlo sličan jednom kojeg sam objavio ranije ove godine pod naslovom “Ionic 3 – Prikaz Google mape“.

Priprema Ionic projekta

Za početak kreiram novi Ionic projekt.

Aplikacija sada nema nikakve funkcionalnosti pa ću prije nego implementiram Google Maps Directions API implementirati Lazy Loading. Ovaj korak nije potreban i može se bez njega, ali će dobro za kasnije brže učitavanje aplikacije.

Prvi korak koji je potrebno učiniti tiče se stranice ‘src/app/app.module.ts’ u kojoj je potrebno ukloniti sve poveznice na Home stranicu.

Nakon toga kreiram novu stranicu ‘src/pages/home/home.module.ts’ sa sljedećim sadržajem

Sada se vraćam na stranicu ‘src/pages/home/home.ts’ unutar koje moram dodati IonicPage pa to sada izgleda ovako

I za kraj odlazim u ‘src/app/app.component.ts’ gdje uklanjam import na HomePage stranicu i stavljam ju pod navodnike jer tako funkcionira Lazy Loading.

Google Developer konzola

Odlazim na stranicu https://console.developers.google.com/ i ondje kreiram novi projekt.

Ionic 3 & Google Maps – prikaz rute od jedne do druge lokacije

Nakon toga idem na ‘Enable Apis And Services‘ kako bi odabrao i aktivirao API koji želim koristiti.

Google Developer konzola - aktivacija API-ja

U tražilicu upisujem ‘Google Maps‘ i dobijem popis svih povezanih API-ja.

Google Maps Directions API

Aktiviram Google Maps Directions API.

Google Maps Directions API

Nakon što sam aktivirao API moram kreirati jedinstveni ključ koji ću kasnije biti dio Ionic aplikacije.

Google Maps Directions API - kreiranje ključa

I konačno, imam jedinstveni API ključ.

Google Maps Directions API KEY

Ugrađivanje API-ja u aplikaciju

API ključ koji sam maloprije kreirao u aplikaciju ugrađujem tako da unutar datoteke ‘src/app/index.html’ unutar <head> taga upisujem

Sada mogu napraviti glavnu funkcionalnost unutar datoteke ‘src/pages/home/home.ts’. U ovom slučaju odabirem travelMode: 'DRIVING' jer želim prikazati cestovnu rutu. Detaljnije o drugim opcijama na poveznici https://developers.google.com/maps/documentation/javascript/directions

Izgled ekrana sastojat će se od pregleda Google mape i mogućnosti odabira lokacija u gornjem desnom kutu ekrana.

Pozicioniranje padajućeg izbornika CSS-om.

I konačno, aplikacija sada izgleda ovako

Ionic 3 & Google Maps – prikaz rute od jedne do druge lokacije

Objavio

Tomislav Stanković

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

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *

Ova web-stranica koristi Akismet za zaštitu protiv spama. Saznajte kako se obrađuju podaci komentara.