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.
|
1 2 3 |
$ ionic start IonicGoogleMapsDirections blank $ cd IonicGoogleMapsDirections $ ionic serve |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; //import { HomePage } from '../pages/home/home'; @NgModule({ declarations: [ MyApp //HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp //HomePage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} |
Nakon toga kreiram novu stranicu ‘src/pages/home/home.module.ts’ sa sljedećim sadržajem
|
1 2 3 4 5 6 7 8 9 10 |
import { NgModule } from '@angular/core'; import { HomePage} from './home'; import { IonicPageModule } from 'ionic-angular'; @NgModule({ declarations: [HomePage], imports: [IonicPageModule.forChild(HomePage)], entryComponents: [HomePage] }) export class HomePageModule { } |
Sada se vraćam na stranicu ‘src/pages/home/home.ts’ unutar koje moram dodati IonicPage pa to sada izgleda ovako
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { IonicPage } from 'ionic-angular'; import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @IonicPage() @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController) { } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; //import { HomePage } from '../pages/home/home'; @Component({ templateUrl: 'app.html' }) export class MyApp { rootPage:any = 'HomePage'; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. statusBar.styleDefault(); splashScreen.hide(); }); } } |
Google Developer konzola
Odlazim na stranicu https://console.developers.google.com/ i ondje kreiram novi projekt.
Nakon toga idem na ‘Enable Apis And Services‘ kako bi odabrao i aktivirao API koji želim koristiti.
U tražilicu upisujem ‘Google Maps‘ i dobijem popis svih povezanih API-ja.
Aktiviram Google Maps Directions API.
Nakon što sam aktivirao API moram kreirati jedinstveni ključ koji ću kasnije biti dio Ionic aplikacije.
I konačno, imam jedinstveni API ključ.
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
|
1 |
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import { Component, ViewChild, ElementRef } from '@angular/core'; import { IonicPage } from 'ionic-angular'; import { NavController } from 'ionic-angular'; declare var google; @IonicPage() @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { @ViewChild('map') mapElement: ElementRef; map: any; start = 'vinkovci, hr'; end = 'vinkovci, hr'; directionsService = new google.maps.DirectionsService; directionsDisplay = new google.maps.DirectionsRenderer; constructor(public navCtrl: NavController) { } ionViewDidLoad(){ this.initMap(); } initMap() { this.map = new google.maps.Map(this.mapElement.nativeElement, { zoom: 7, center: {lat: 41.85, lng: -87.65} }); this.directionsDisplay.setMap(this.map); } calculateAndDisplayRoute() { this.directionsService.route({ origin: this.start, destination: this.end, travelMode: 'DRIVING' }, (response, status) => { if (status === 'OK') { this.directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); } } |
Izgled ekrana sastojat će se od pregleda Google mape i mogućnosti odabira lokacija u gornjem desnom kutu ekrana.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<ion-content> <div id="floating-panel"> <b>Start: </b> <select [(ngModel)]="start" id="start" (change)="calculateAndDisplayRoute()"> <option value="vinkovci, hr">Vinkovci</option> <option value="osijek, hr">Osijek</option> <option value="split, hr">Split</option> <option value="zagreb, hr">Zagreb</option> <option value="cakovec, hr">Čakovec</option> <option value="dubrovnik, hr">Dubrovnik</option> </select><br> <b>End: </b> <select [(ngModel)]="end" id="end" (change)="calculateAndDisplayRoute()"> <option value="vinkovci, hr">Vinkovci</option> <option value="osijek, hr">Osijek</option> <option value="split, hr">Split</option> <option value="zagreb, hr">Zagreb</option> <option value="cakovec, hr">Čakovec</option> <option value="dubrovnik, hr">Dubrovnik</option> </select> </div> <div #map id="map"></div> </ion-content> |
Pozicioniranje padajućeg izbornika CSS-om.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
page-home { #floating-panel { position: absolute; top: 10px; right: 5px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #map { height: 100%; } } |
I konačno, aplikacija sada izgleda ovako
