{"id":6673,"date":"2017-12-10T13:50:01","date_gmt":"2017-12-10T11:50:01","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=6673"},"modified":"2019-01-05T19:51:35","modified_gmt":"2019-01-05T17:51:35","slug":"ionic-google-maps-prikaz-rute","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/","title":{"rendered":"Ionic 3 & Google Maps – prikaz rute izme\u0111u dvije lokacije"},"content":{"rendered":"

U ovom \u0107u blog postu koristiti Google Maps Directions API<\/em><\/a> za prikaz rute od jedne do druge lokacije. Tako\u0111er, ovaj \u0107e blog post biti vrlo sli\u010dan jednom kojeg sam objavio ranije ove godine pod naslovom “Ionic 3 \u2013 Prikaz Google mape<\/a>“. <\/p>\n

Priprema Ionic projekta<\/h2>\n

Za po\u010detak kreiram novi Ionic<\/em> projekt<\/a>.<\/p>\n

$ ionic start IonicGoogleMapsDirections blank\r\n$ cd IonicGoogleMapsDirections\r\n$ ionic serve<\/pre>\n
Aplikacija sada nema nikakve funkcionalnosti<\/a> pa \u0107u prije nego implementiram Google Maps Directions API<\/em> implementirati Lazy Loading<\/a>. Ovaj korak nije potreban i mo\u017ee se bez njega, ali \u0107e dobro za kasnije br\u017ee u\u010ditavanje aplikacije.<\/p>\n
Prvi korak koji je potrebno u\u010diniti ti\u010de se stranice ‘src\/app\/app.module.ts’<\/em><\/strong> u kojoj je potrebno ukloniti sve poveznice na Home<\/em> stranicu. <\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\r\nimport { ErrorHandler, NgModule } from '@angular\/core';\r\nimport { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';\r\nimport { SplashScreen } from '@ionic-native\/splash-screen';\r\nimport { StatusBar } from '@ionic-native\/status-bar';\r\n\r\nimport { MyApp } from '.\/app.component';\r\n\/\/import { HomePage } from '..\/pages\/home\/home';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    MyApp\r\n    \/\/HomePage\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    IonicModule.forRoot(MyApp)\r\n  ],\r\n  bootstrap: [IonicApp],\r\n  entryComponents: [\r\n    MyApp\r\n    \/\/HomePage\r\n  ],\r\n  providers: [\r\n    StatusBar,\r\n    SplashScreen,\r\n    {provide: ErrorHandler, useClass: IonicErrorHandler}\r\n  ]\r\n})\r\nexport class AppModule {}<\/pre>\n
Nakon toga kreiram novu stranicu ‘src\/pages\/home\/home.module.ts’<\/em> sa sljede\u0107im sadr\u017eajem<\/p>\n
import { NgModule } from '@angular\/core';\r\nimport { HomePage} from '.\/home';\r\nimport { IonicPageModule } from 'ionic-angular';\r\n\r\n@NgModule({\r\n  declarations: [HomePage],\r\n  imports: [IonicPageModule.forChild(HomePage)],\r\n  entryComponents: [HomePage]\r\n})\r\nexport class HomePageModule { }<\/pre>\n
Sada se vra\u0107am na stranicu ‘src\/pages\/home\/home.ts’ unutar koje moram dodati IonicPage<\/a><\/em> pa to sada izgleda ovako<\/p>\n
import { IonicPage } from 'ionic-angular';\r\nimport { Component } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\n\r\n@IonicPage()\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n\r\n  constructor(public navCtrl: NavController) {\r\n\r\n  }\r\n\r\n}<\/pre>\n
I za kraj odlazim u ‘src\/app\/app.component.ts’ gdje uklanjam import na HomePage<\/em> stranicu i stavljam ju pod navodnike jer tako funkcionira Lazy Loading<\/em>.<\/p>\n
import { Component } from '@angular\/core';\r\nimport { Platform } from 'ionic-angular';\r\nimport { StatusBar } from '@ionic-native\/status-bar';\r\nimport { SplashScreen } from '@ionic-native\/splash-screen';\r\n\r\n\/\/import { HomePage } from '..\/pages\/home\/home';\r\n\r\n@Component({\r\n  templateUrl: 'app.html'\r\n})\r\nexport class MyApp {\r\n  rootPage:any = 'HomePage';\r\n\r\n  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {\r\n    platform.ready().then(() => {\r\n      \/\/ Okay, so the platform is ready and our plugins are available.\r\n      \/\/ Here you can do any higher level native things you might need.\r\n      statusBar.styleDefault();\r\n      splashScreen.hide();\r\n    });\r\n  }\r\n}<\/pre>\n
Google Developer konzola<\/h2>\n
Odlazim na stranicu https:\/\/console.developers.google.com\/<\/a> i ondje kreiram novi projekt.<\/p>\n
\"Ionic<\/a><\/p>\n
Nakon toga idem na ‘Enable Apis And Services<\/em>‘ kako bi odabrao i aktivirao API koji \u017eelim koristiti.<\/p>\n
\"Google<\/a><\/p>\n
U tra\u017eilicu upisujem ‘Google Maps<\/em>‘ i dobijem popis svih povezanih API-ja.<\/p>\n
\"Google<\/a><\/p>\n
Aktiviram Google Maps Directions API<\/em>.<\/p>\n
\"Google<\/a><\/p>\n
Nakon \u0161to sam aktivirao API<\/em> moram kreirati jedinstveni klju\u010d koji \u0107u kasnije biti dio Ionic<\/em> aplikacije.<\/p>\n
\"Google<\/a><\/p>\n
I kona\u010dno, imam jedinstveni API<\/em> klju\u010d.<\/p>\n
\"Google<\/a><\/p>\n
Ugra\u0111ivanje API-ja u aplikaciju<\/h2>\n
API<\/em> klju\u010d koji sam maloprije kreirao u aplikaciju ugra\u0111ujem tako da unutar datoteke ‘src\/app\/index.html’ unutar <\/p>\n
<head><\/pre>\n
 taga upisujem  <\/p>\n
<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=API_KEY\"><\/script><\/pre>\n
Sada mogu napraviti glavnu funkcionalnost unutar datoteke ‘src\/pages\/home\/home.ts’. U ovom slu\u010daju odabirem  travelMode: ‘DRIVING’<\/span>  jer \u017eelim prikazati cestovnu rutu. Detaljnije o drugim opcijama na poveznici https:\/\/developers.google.com\/maps\/documentation\/javascript\/directions<\/a><\/p>\n
import { Component, ViewChild, ElementRef } from '@angular\/core';\r\nimport { IonicPage } from 'ionic-angular';\r\nimport { NavController } from 'ionic-angular';\r\n\r\ndeclare var google;\r\n\r\n@IonicPage()\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n\r\n  @ViewChild('map') mapElement: ElementRef;\r\n  map: any;\r\n  start = 'vinkovci, hr';\r\n  end = 'vinkovci, hr';\r\n  directionsService = new google.maps.DirectionsService;\r\n  directionsDisplay = new google.maps.DirectionsRenderer;\r\n\r\n  constructor(public navCtrl: NavController) {\r\n\r\n  }\r\n\r\n  ionViewDidLoad(){\r\n    this.initMap();\r\n  }\r\n\r\n  initMap() {\r\n    this.map = new google.maps.Map(this.mapElement.nativeElement, {\r\n      zoom: 7,\r\n      center: {lat: 41.85, lng: -87.65}\r\n    });\r\n\r\n    this.directionsDisplay.setMap(this.map);\r\n  }\r\n\r\n  calculateAndDisplayRoute() {\r\n    this.directionsService.route({\r\n      origin: this.start,\r\n      destination: this.end,\r\n      travelMode: 'DRIVING'\r\n    }, (response, status) => {\r\n      if (status === 'OK') {\r\n        this.directionsDisplay.setDirections(response);\r\n      } else {\r\n        window.alert('Directions request failed due to ' + status);\r\n      }\r\n    });\r\n  }\r\n\r\n}<\/pre>\n
Izgled ekrana sastojat \u0107e se od pregleda Google<\/em> mape i mogu\u0107nosti odabira lokacija u gornjem desnom kutu ekrana.<\/p>\n
<ion-content>\r\n  <div id=\"floating-panel\">\r\n    <b>Start: <\/b>\r\n    <select [(ngModel)]=\"start\" id=\"start\" (change)=\"calculateAndDisplayRoute()\">\r\n      <option value=\"vinkovci, hr\">Vinkovci<\/option>\r\n\t  <option value=\"osijek, hr\">Osijek<\/option>\r\n\t  <option value=\"split, hr\">Split<\/option>\r\n\t  <option value=\"zagreb, hr\">Zagreb<\/option>\r\n\t  <option value=\"cakovec, hr\">\u010cakovec<\/option>\r\n\t  <option value=\"dubrovnik, hr\">Dubrovnik<\/option>\r\n    <\/select><br>\r\n    <b>End: <\/b>\r\n    <select [(ngModel)]=\"end\" id=\"end\" (change)=\"calculateAndDisplayRoute()\">\r\n      <option value=\"vinkovci, hr\">Vinkovci<\/option>\r\n\t  <option value=\"osijek, hr\">Osijek<\/option>\r\n\t  <option value=\"split, hr\">Split<\/option>\r\n\t  <option value=\"zagreb, hr\">Zagreb<\/option>\r\n\t  <option value=\"cakovec, hr\">\u010cakovec<\/option>\r\n\t  <option value=\"dubrovnik, hr\">Dubrovnik<\/option>\r\n    <\/select>\r\n    <\/div>\r\n    <div #map id=\"map\"><\/div>\r\n<\/ion-content><\/pre>\n
Pozicioniranje padaju\u0107eg izbornika CSS<\/em>-om. <\/p>\n
page-home {\r\n  #floating-panel {\r\n    position: absolute;\r\n    top: 10px;\r\n    right: 5px;\r\n    z-index: 5;\r\n    background-color: #fff;\r\n    padding: 5px;\r\n    border: 1px solid #999;\r\n    text-align: center;\r\n    font-family: 'Roboto','sans-serif';\r\n    line-height: 30px;\r\n    padding-left: 10px;\r\n  }\r\n  #map {\r\n    height: 100%;\r\n  }\r\n}<\/pre>\n
I kona\u010dno, aplikacija sada izgleda ovako<\/p>\n
\"Ionic<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
U ovom \u0107u blog postu koristiti Google Maps Directions API za prikaz rute od jedne do druge lokacije. Tako\u0111er, ovaj \u0107e blog post biti vrlo sli\u010dan jednom kojeg sam objavio ranije ove godine pod naslovom “Ionic 3 \u2013 Prikaz Google mape“. Priprema Ionic projekta Za po\u010detak kreiram novi Ionic projekt. $ ionic start IonicGoogleMapsDirections blank … Nastavi \u010ditati Ionic 3 & Google Maps – prikaz rute izme\u0111u dvije lokacije<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":6674,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[564,351],"tags":[481,352,400],"class_list":["post-6673","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-razvoj","tag-google-maps","tag-ionic","tag-ionic-3"],"yoast_head":"\nIonic 3 & Google Maps - prikaz rute izme\u0111u dvije lokacije - Tomislav Stankovi\u0107<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic 3 & Google Maps - prikaz rute izme\u0111u dvije lokacije - Tomislav Stankovi\u0107\" \/>\n<meta property=\"og:description\" content=\"U ovom \u0107u blog postu koristiti Google Maps Directions API za prikaz rute od jedne do druge lokacije. Tako\u0111er, ovaj \u0107e blog post biti vrlo sli\u010dan jednom kojeg sam objavio ranije ove godine pod naslovom “Ionic 3 \u2013 Prikaz Google mape“. Priprema Ionic projekta Za po\u010detak kreiram novi Ionic projekt. $ ionic start IonicGoogleMapsDirections blank … Nastavi \u010ditati Ionic 3 & Google Maps – prikaz rute izme\u0111u dvije lokacije\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-10T11:50:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-05T17:51:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2017\/12\/ionic-google-maps-directions-upute.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisao\/la\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomislav Stankovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Procijenjeno vrijeme \u010ditanja\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/\"},\"author\":{\"name\":\"Tomislav Stankovi\u0107\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"headline\":\"Ionic 3 & Google Maps – prikaz rute izme\u0111u dvije lokacije\",\"datePublished\":\"2017-12-10T11:50:01+00:00\",\"dateModified\":\"2019-01-05T17:51:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/\"},\"wordCount\":355,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/ionic-google-maps-directions-upute.png\",\"keywords\":[\"Google Maps\",\"Ionic\",\"Ionic 3\"],\"articleSection\":[\"Mobile\",\"Razvoj\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/\",\"name\":\"Ionic 3 & Google Maps - prikaz rute izme\u0111u dvije lokacije - Tomislav Stankovi\u0107\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/ionic-google-maps-directions-upute.png\",\"datePublished\":\"2017-12-10T11:50:01+00:00\",\"dateModified\":\"2019-01-05T17:51:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/ionic-google-maps-directions-upute.png\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/ionic-google-maps-directions-upute.png\",\"width\":825,\"height\":510,\"caption\":\"Ionic 3 - Google Maps upute\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-google-maps-prikaz-rute\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna stranica\",\"item\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic 3 & Google Maps – prikaz rute izme\u0111u dvije lokacije\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"name\":\"Tomislav Stankovi\u0107\",\"description\":\"Sam svoj bloger\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\",\"name\":\"Tomislav Stankovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"width\":248,\"height\":165,\"caption\":\"Tomislav Stankovi\u0107\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\"},\"description\":\"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.\",\"sameAs\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/tomislavstankovic\\\/\"],\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/author\\\/tomislavstankovic\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ionic 3 & Google Maps - prikaz rute izme\u0111u dvije lokacije - Tomislav Stankovi\u0107","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/","og_locale":"hr_HR","og_type":"article","og_title":"Ionic 3 & Google Maps - prikaz rute izme\u0111u dvije lokacije - Tomislav Stankovi\u0107","og_description":"U ovom \u0107u blog postu koristiti Google Maps Directions API za prikaz rute od jedne do druge lokacije. Tako\u0111er, ovaj \u0107e blog post biti vrlo sli\u010dan jednom kojeg sam objavio ranije ove godine pod naslovom “Ionic 3 \u2013 Prikaz Google mape“. Priprema Ionic projekta Za po\u010detak kreiram novi Ionic projekt. $ ionic start IonicGoogleMapsDirections blank … Nastavi \u010ditati Ionic 3 & Google Maps – prikaz rute izme\u0111u dvije lokacije","og_url":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/","og_site_name":"Tomislav Stankovi\u0107","article_published_time":"2017-12-10T11:50:01+00:00","article_modified_time":"2019-01-05T17:51:35+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2017\/12\/ionic-google-maps-directions-upute.png","type":"image\/png"}],"author":"Tomislav Stankovi\u0107","twitter_card":"summary_large_image","twitter_misc":{"Napisao\/la":"Tomislav Stankovi\u0107","Procijenjeno vrijeme \u010ditanja":"4 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/#article","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/"},"author":{"name":"Tomislav Stankovi\u0107","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"headline":"Ionic 3 & Google Maps – prikaz rute izme\u0111u dvije lokacije","datePublished":"2017-12-10T11:50:01+00:00","dateModified":"2019-01-05T17:51:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/"},"wordCount":355,"commentCount":0,"publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2017\/12\/ionic-google-maps-directions-upute.png","keywords":["Google Maps","Ionic","Ionic 3"],"articleSection":["Mobile","Razvoj"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/","url":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/","name":"Ionic 3 & Google Maps - prikaz rute izme\u0111u dvije lokacije - Tomislav Stankovi\u0107","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/#primaryimage"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2017\/12\/ionic-google-maps-directions-upute.png","datePublished":"2017-12-10T11:50:01+00:00","dateModified":"2019-01-05T17:51:35+00:00","breadcrumb":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/#primaryimage","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2017\/12\/ionic-google-maps-directions-upute.png","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2017\/12\/ionic-google-maps-directions-upute.png","width":825,"height":510,"caption":"Ionic 3 - Google Maps upute"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-google-maps-prikaz-rute\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna stranica","item":"https:\/\/www.tomislavstankovic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ionic 3 & Google Maps – prikaz rute izme\u0111u dvije lokacije"}]},{"@type":"WebSite","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website","url":"https:\/\/www.tomislavstankovic.com\/blog\/","name":"Tomislav Stankovi\u0107","description":"Sam svoj bloger","publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tomislavstankovic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hr"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d","name":"Tomislav Stankovi\u0107","image":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","width":248,"height":165,"caption":"Tomislav Stankovi\u0107"},"logo":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg"},"description":"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.","sameAs":["https:\/\/www.tomislavstankovic.com\/blog\/","https:\/\/www.linkedin.com\/in\/tomislavstankovic\/"],"url":"https:\/\/www.tomislavstankovic.com\/blog\/author\/tomislavstankovic\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/6673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/comments?post=6673"}],"version-history":[{"count":37,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/6673\/revisions"}],"predecessor-version":[{"id":6718,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/6673\/revisions\/6718"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media\/6674"}],"wp:attachment":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media?parent=6673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/categories?post=6673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/tags?post=6673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}