Arhiva Google Maps - Tomislav Stanković

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.

$ ionic start IonicGoogleMapsDirections blank
$ cd IonicGoogleMapsDirections
$ ionic serve

$ 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.

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 {}

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

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 { }

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

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) {

  }

}

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.

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();
    });
  }
}

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

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

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

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);
      }
    });
  }

}

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.

<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>

<ion-content>

<b>Start: </b>

<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>

<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>

</ion-content>

Pozicioniranje padajućeg izbornika CSS-om.

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%;
  }
}

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

Oznaka: Google Maps

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

Priprema Ionic projekta

Google Developer konzola

Ugrađivanje API-ja u aplikaciju