Ionic 3 - Prikaz Google mape - Tomislav Stanković

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnJkTG_-ZSxxXwseJTZcvgFscpcFM1WFw"></script>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>

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.

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

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3GoogleMaps
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

<div #map id="map"></div>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3GoogleMaps

</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

</ion-content>

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

page-home {
  #map {
      width: 100%;
      height: 100%;
  }
}

#map {

width: 100%;

height: 100%;

}

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

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController) {

}

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

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElmt: ElementRef;
  map: any;
  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){
    let latLng = new google.maps.LatLng('45.287906','18.805678');
    let mapOptions = {
      center:latLng,
      zoom:11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);

  }

}

import { Component, ViewChild, ElementRef } from '@angular/core';

import { NavController } from 'ionic-angular';

declare var google;

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('map') mapElmt: ElementRef;

map: any;

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){

this.loadMap();

}

loadMap(){

let latLng = new google.maps.LatLng('45.287906','18.805678');

let mapOptions = {

center:latLng,

zoom:11,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);

}

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

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.

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElmt: ElementRef;
  map: any;

   mojeLokacije = [
     {
      'name':'Stadion HNK Cibalia',
      'lat':'45.283666',
      'lng':'18.797286'
     },
     {
      'name':'Opća županijska bolnica Vinkovci',
      'lat':'45.292581',
      'lng':'18.818271'
     },
     {
      'name':'Jezero Banja, Vinkovci',
      'lat':'45.286323',
      'lng':'18.784025'
     },
     {
      'name':'Željeznički kolodvor (postaja) Vinkovci',
      'lat':'45.300063',
      'lng':'18.802725'
     }
   ]

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){
    let latLng = new google.maps.LatLng('45.286674','18.802124');
    let mapOptions = {
      center:latLng,
      zoom:11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);

    for (let lokacija of this.mojeLokacije){
        this.addMarker(lokacija, lokacija['name']);
    }

  }

  addMarker(posInfo,info){
    let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);

    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: position
    });
  }

}

import { Component, ViewChild, ElementRef } from '@angular/core';

import { NavController } from 'ionic-angular';

declare var google;

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('map') mapElmt: ElementRef;

map: any;

mojeLokacije = [

{

'name':'Stadion HNK Cibalia',

'lat':'45.283666',

'lng':'18.797286'

{

'name':'Opća županijska bolnica Vinkovci',

'lat':'45.292581',

'lng':'18.818271'

{

'name':'Jezero Banja, Vinkovci',

'lat':'45.286323',

'lng':'18.784025'

{

'name':'Željeznički kolodvor (postaja) Vinkovci',

'lat':'45.300063',

'lng':'18.802725'

}

]

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){

this.loadMap();

}

loadMap(){

let latLng = new google.maps.LatLng('45.286674','18.802124');

let mapOptions = {

center:latLng,

zoom:11,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);

for (let lokacija of this.mojeLokacije){

this.addMarker(lokacija, lokacija['name']);

}

addMarker(posInfo,info){

let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);

let marker = new google.maps.Marker({

map: this.map,

animation: google.maps.Animation.DROP,

position: position

});

}

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

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.

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElmt: ElementRef;
  map: any;

   mojeLokacije = [
     {
      'name':'Stadion HNK Cibalia',
      'lat':'45.283666',
      'lng':'18.797286'
     },
     {
      'name':'Opća županijska bolnica Vinkovci',
      'lat':'45.292581',
      'lng':'18.818271'
     },
     {
      'name':'Jezero Banja, Vinkovci',
      'lat':'45.286323',
      'lng':'18.784025'
     },
     {
      'name':'Željeznički kolodvor (postaja) Vinkovci',
      'lat':'45.300063',
      'lng':'18.802725'
     }
   ]

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){
    let latLng = new google.maps.LatLng('45.286674','18.802124');
    let mapOptions = {
      center:latLng,
      zoom:11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);

    for (let lokacija of this.mojeLokacije){
        this.addMarker(lokacija, lokacija['name']);
    }

  }

  addMarker(posInfo,info){
    let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);

    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: position
    });
    let markerInfo = info;
    this.addInfo(marker, markerInfo);
  }

  addInfo(marker, content){
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });

    google.maps.event.addListener(marker, 'click', () => {
     infoWindow.open(this.map, marker);
    })
  }

}

import { Component, ViewChild, ElementRef } from '@angular/core';

import { NavController } from 'ionic-angular';

declare var google;

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('map') mapElmt: ElementRef;

map: any;

mojeLokacije = [

{

'name':'Stadion HNK Cibalia',

'lat':'45.283666',

'lng':'18.797286'

{

'name':'Opća županijska bolnica Vinkovci',

'lat':'45.292581',

'lng':'18.818271'

{

'name':'Jezero Banja, Vinkovci',

'lat':'45.286323',

'lng':'18.784025'

{

'name':'Željeznički kolodvor (postaja) Vinkovci',

'lat':'45.300063',

'lng':'18.802725'

}

]

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){

this.loadMap();

}

loadMap(){

let latLng = new google.maps.LatLng('45.286674','18.802124');

let mapOptions = {

center:latLng,

zoom:11,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);

for (let lokacija of this.mojeLokacije){

this.addMarker(lokacija, lokacija['name']);

}

addMarker(posInfo,info){

let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);

let marker = new google.maps.Marker({

map: this.map,

animation: google.maps.Animation.DROP,

position: position

});

let markerInfo = info;

this.addInfo(marker, markerInfo);

}

addInfo(marker, content){

let infoWindow = new google.maps.InfoWindow({

content: content

});

google.maps.event.addListener(marker, 'click', () => {

infoWindow.open(this.map, marker);

})

}

U nastavku možemo vidjeti markere s dodatnim informacijama.

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

page-home {
  #map {
      width: 100%;
      height: 70%;
  }
}

page-home {

#map {

width: 100%;

height: 70%;

}

Nakon toga napravit ćemo pripremu za ispis lokacija

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3GoogleMaps
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

<div #map id="map"></div>
<ion-list>
  <button ion-item (click)="focusMap(lokacija)" *ngFor="let lokacija of mojeLokacije">
  <ion-icon name="locate" item-left small></ion-icon>
  {{lokacija.name}}
  </button>
</ion-list>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3GoogleMaps

</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-list>

<ion-icon name="locate" item-left small></ion-icon>

</button>

</ion-list>

</ion-content>

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

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElmt: ElementRef;
  map: any;

   mojeLokacije = [
     {
      'name':'Stadion HNK Cibalia',
      'lat':'45.283666',
      'lng':'18.797286'
     },
     {
      'name':'Opća županijska bolnica Vinkovci',
      'lat':'45.292581',
      'lng':'18.818271'
     },
     {
      'name':'Jezero Banja, Vinkovci',
      'lat':'45.286323',
      'lng':'18.784025'
     },
     {
      'name':'Željeznički kolodvor (postaja) Vinkovci',
      'lat':'45.300063',
      'lng':'18.802725'
     }
   ]

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){
    let latLng = new google.maps.LatLng('45.286674','18.802124');
    let mapOptions = {
      center:latLng,
      zoom:11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);

    for (let lokacija of this.mojeLokacije){
        this.addMarker(lokacija, lokacija['name']);
    }

  }

  addMarker(posInfo,info){
    let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);

    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: position
    });
    let markerInfo = info;
    this.addInfo(marker, markerInfo);
  }

  addInfo(marker, content){
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });

    google.maps.event.addListener(marker, 'click', () => {
     infoWindow.open(this.map, marker);
    })
  }

  focusMap(lokacija){
   let position = new google.maps.LatLng(lokacija['lat'],lokacija['lng']);
   this.map.setCenter(position);
   this.map.setZoom(15);
  }

}

import { Component, ViewChild, ElementRef } from '@angular/core';

import { NavController } from 'ionic-angular';

declare var google;

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('map') mapElmt: ElementRef;

map: any;

mojeLokacije = [

{

'name':'Stadion HNK Cibalia',

'lat':'45.283666',

'lng':'18.797286'

{

'name':'Opća županijska bolnica Vinkovci',

'lat':'45.292581',

'lng':'18.818271'

{

'name':'Jezero Banja, Vinkovci',

'lat':'45.286323',

'lng':'18.784025'

{

'name':'Željeznički kolodvor (postaja) Vinkovci',

'lat':'45.300063',

'lng':'18.802725'

}

]

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){

this.loadMap();

}

loadMap(){

let latLng = new google.maps.LatLng('45.286674','18.802124');

let mapOptions = {

center:latLng,

zoom:11,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);

for (let lokacija of this.mojeLokacije){

this.addMarker(lokacija, lokacija['name']);

}

addMarker(posInfo,info){

let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);

let marker = new google.maps.Marker({

map: this.map,

animation: google.maps.Animation.DROP,

position: position

});

let markerInfo = info;

this.addInfo(marker, markerInfo);

}

addInfo(marker, content){

let infoWindow = new google.maps.InfoWindow({

content: content

});

google.maps.event.addListener(marker, 'click', () => {

infoWindow.open(this.map, marker);

})

}

focusMap(lokacija){

let position = new google.maps.LatLng(lokacija['lat'],lokacija['lng']);

this.map.setCenter(position);

this.map.setZoom(15);

}

Konačni rezultat je vidljiv u nastavku

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.

{
  "name": "Ionic3-GoogleMaps",
  "version": "0.0.0",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@ionic-native/core": "3.6.1",
    "@ionic-native/splash-screen": "3.6.1",
    "@ionic-native/status-bar": "3.6.1",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.1.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.7",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "ionic-plugin-keyboard",
    "cordova-plugin-splashscreen"
  ],
  "cordovaPlatforms": [],
  "description": "Ionic3GoogleMaps: An Ionic project"
}

{

"name": "Ionic3-GoogleMaps",

"version": "0.0.0",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve"

"dependencies": {

"@angular/common": "4.0.2",

"@angular/compiler": "4.0.2",

"@angular/compiler-cli": "4.0.2",

"@angular/core": "4.0.2",

"@angular/forms": "4.0.2",

"@angular/http": "4.0.2",

"@angular/platform-browser": "4.0.2",

"@angular/platform-browser-dynamic": "4.0.2",

"@ionic-native/core": "3.6.1",

"@ionic-native/splash-screen": "3.6.1",

"@ionic-native/status-bar": "3.6.1",

"@ionic/storage": "2.0.1",

"ionic-angular": "3.1.1",

"ionicons": "3.0.0",

"rxjs": "5.1.1",

"sw-toolbox": "3.4.0",

"zone.js": "^0.8.10"

"devDependencies": {

"@ionic/app-scripts": "1.3.7",

"typescript": "~2.2.1"

"cordovaPlugins": [

"cordova-plugin-whitelist",

"cordova-plugin-console",

"cordova-plugin-statusbar",

"cordova-plugin-device",

"ionic-plugin-keyboard",

"cordova-plugin-splashscreen"

"cordovaPlatforms": [],

"description": "Ionic3GoogleMaps: An Ionic project"

}

Ionic 3 – Prikaz Google mape

Prikaz Google mape

Dodavanje markera

Dodatne informacije na markerima

Popis lokacija s fokusom

Zaključak

Objavio

Tomislav Stanković

Odgovori Otkaži odgovor