{"id":5304,"date":"2017-05-07T23:07:36","date_gmt":"2017-05-07T21:07:36","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=5304"},"modified":"2019-01-05T19:55:12","modified_gmt":"2019-01-05T17:55:12","slug":"ionic3-google-maps-karte","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/","title":{"rendered":"Ionic 3 – Prikaz Google mape"},"content":{"rendered":"

U ovom \u0107u blog postu pokazati kako integrirati Google<\/em> mape unutar Ionic<\/em> aplikacije koriste\u0107i JavaScript SDK<\/em><\/a>.<\/p>\n

Za\u0161to Google Maps?<\/strong><\/p>\n

Zato \u0161to je to najjednostavniji<\/strong> i najbolji na\u010din<\/strong> za prikaz mapa sa dosta mogu\u0107nosti i odli\u010dnom dokumentacijom<\/a> + \u0161to je kori\u0161tenje Google<\/em> mapa besplatno<\/strong> do odre\u0111ene razine<\/a>.<\/p>\n

Native ili JavaScript SDK?<\/strong><\/p>\n

U ovom slu\u010daju koristit \u0107emo JavaScript SDK<\/em> jer nam je to br\u017ei i jednostavniji na\u010din za razvoj i testiranje. Zna\u010di, kako razvijamo funkcionalnosti Google<\/em> mape unutar Ionic<\/em> aplikacije istovremeno ih mo\u017eemo testirati unutar web preglednika dok bi u slu\u010daju kori\u0161tenja Native SDK<\/em><\/a> morali sve testirati na ure\u0111aju.<\/p>\n

Pod pretpostavkom da ve\u0107 imate pokrenut Ionic<\/em> projekt<\/a> mo\u017eemo krenuti dalje.<\/p>\n

Prikaz Google mape<\/h2>\n

Za po\u010detak \u0107emo uvesti JavaScript SDK<\/em> u index.html<\/span> datoteku na na\u010din da dodamo <script><\/span> tag na sljede\u0107i na\u010din<\/p>\n

<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBnJkTG_-ZSxxXwseJTZcvgFscpcFM1WFw\"><\/script>\r\n<!-- cordova.js required for cordova apps -->\r\n<script src=\"cordova.js\"><\/script><\/pre>\n
U slu\u010daju da ne unesete Api Key<\/em> dobit \u0107ete poruku o gre\u0161ci “Google Maps API warning: NoApiKeys<\/em><\/span>“, ali \u0107e mape i dalje raditi.<\/p>\n
\"Google<\/a><\/p>\n
Sada se mo\u017eemo prebaciti na stranicu u na\u0161oj Ionic<\/em> aplikaciji koja \u0107e slu\u017eiti za prikaz Google<\/em> mape. U ovom slu\u010daju to \u0107e biti  home.html<\/span> <\/p>\n
<ion-header>\r\n  <ion-navbar>\r\n    <ion-title>\r\n      Ionic3GoogleMaps\r\n    <\/ion-title>\r\n  <\/ion-navbar>\r\n<\/ion-header>\r\n\r\n<ion-content>\r\n\r\n<div #map id=\"map\"><\/div>\r\n\r\n<\/ion-content><\/pre>\n
ID  “map”<\/span>  slu\u017ei nam samo kako bi mogli napraviti sljede\u0107e<\/p>\n
page-home {\r\n  #map {\r\n      width: 100%;\r\n      height: 100%;\r\n  }\r\n}<\/pre>\n
Za sada jo\u0161 uvijek ne vidimo mapu jer nismo kontoleru rekli \u0161to da napravi, gdje i pomo\u0107u \u010dega tj. na\u0161a datoteka  home.ts<\/span>  trenutno izgleda ovako<\/p>\n
import { Component } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\n\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
Me\u0111utim, nakon \u0161to uvezemo dodatne elemente i kreiramo funkciju koja \u0107e prikazati zadanu mapu stanje \u0107e se promijeniti<\/p>\n
import { Component, ViewChild, ElementRef } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\n\r\ndeclare var google;\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n  @ViewChild('map') mapElmt: ElementRef;\r\n  map: any;\r\n  constructor(public navCtrl: NavController) {\r\n\r\n  }\r\n\r\n  ionViewDidLoad(){\r\n    this.loadMap();\r\n  }\r\n\r\n  loadMap(){\r\n    let latLng = new google.maps.LatLng('45.287906','18.805678');\r\n    let mapOptions = {\r\n      center:latLng,\r\n      zoom:11,\r\n      mapTypeId: google.maps.MapTypeId.ROADMAP\r\n    }\r\n\r\n    this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);\r\n\r\n  }\r\n\r\n}\r\n<\/pre>\n
Sada ve\u0107 mo\u017eemo ne\u0161to konkretno vidjeti na ekranu. Imamo mapu koja prikazuje Vinkovce prema long<\/em> i lat<\/em> parametrima<\/a>. <\/p>\n
\"Ionic3<\/a><\/p>\n
Dodavanje markera<\/h2>\n
Mapa prikazana na ranije definiran na\u010din nije pretjerano korisna i zato \u0107emo dodati markere kako bi se to\u010dnije znalo \u0161to \u017eelimo naglasiti i \u0161to zapravo prikazujemo. Za ovaj \u0107u primjer odabrati \u010detiri lokacije vezane uz grad Vinkovce i njih \u0107u ozna\u010diti na Google<\/em> mapi.<\/p>\n
import { Component, ViewChild, ElementRef } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\n\r\ndeclare var google;\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n  @ViewChild('map') mapElmt: ElementRef;\r\n  map: any;\r\n\r\n   mojeLokacije = [\r\n     {\r\n      'name':'Stadion HNK Cibalia',\r\n      'lat':'45.283666',\r\n      'lng':'18.797286'\r\n     },\r\n     {\r\n      'name':'Op\u0107a \u017eupanijska bolnica Vinkovci',\r\n      'lat':'45.292581',\r\n      'lng':'18.818271'\r\n     },\r\n     {\r\n      'name':'Jezero Banja, Vinkovci',\r\n      'lat':'45.286323',\r\n      'lng':'18.784025'\r\n     },\r\n     {\r\n      'name':'\u017deljezni\u010dki kolodvor (postaja) Vinkovci',\r\n      'lat':'45.300063',\r\n      'lng':'18.802725'\r\n     }\r\n   ]\r\n\r\n  constructor(public navCtrl: NavController) {\r\n\r\n  }\r\n\r\n  ionViewDidLoad(){\r\n    this.loadMap();\r\n  }\r\n\r\n  loadMap(){\r\n    let latLng = new google.maps.LatLng('45.286674','18.802124');\r\n    let mapOptions = {\r\n      center:latLng,\r\n      zoom:11,\r\n      mapTypeId: google.maps.MapTypeId.ROADMAP\r\n    }\r\n\r\n    this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);\r\n\r\n    for (let lokacija of this.mojeLokacije){\r\n        this.addMarker(lokacija, lokacija['name']);\r\n    }\r\n\r\n  }\r\n\r\n  addMarker(posInfo,info){\r\n    let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);\r\n\r\n    let marker = new google.maps.Marker({\r\n      map: this.map,\r\n      animation: google.maps.Animation.DROP,\r\n      position: position\r\n    });\r\n  }\r\n\r\n}<\/pre>\n
Kada osvje\u017eimo ekran mo\u017eemo vidjeti animirane markere za sve \u010detiri lokacije. <\/p>\n
\"Ionic3<\/a><\/p>\n
Dodatne informacije na markerima<\/h2>\n
Iako se ranije prikazana mapa ve\u0107 sada mo\u017ee smatrati donekle funkcionalnom ipak joj nedostaje jedan va\u017ean detalj, a to su informacije o tome \u0161to svaki pojedini marker to\u010dno prikazuje.<\/p>\n
Zato \u0107emo sada za svaki marker napraviti sko\u010dni prozor\u010di\u0107 koji \u0107e se prikazati kada se klikne na pojedini marker i na taj \u0107emo na\u010din prikazati naziv lokacije.<\/p>\n
import { Component, ViewChild, ElementRef } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\n\r\ndeclare var google;\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n  @ViewChild('map') mapElmt: ElementRef;\r\n  map: any;\r\n\r\n   mojeLokacije = [\r\n     {\r\n      'name':'Stadion HNK Cibalia',\r\n      'lat':'45.283666',\r\n      'lng':'18.797286'\r\n     },\r\n     {\r\n      'name':'Op\u0107a \u017eupanijska bolnica Vinkovci',\r\n      'lat':'45.292581',\r\n      'lng':'18.818271'\r\n     },\r\n     {\r\n      'name':'Jezero Banja, Vinkovci',\r\n      'lat':'45.286323',\r\n      'lng':'18.784025'\r\n     },\r\n     {\r\n      'name':'\u017deljezni\u010dki kolodvor (postaja) Vinkovci',\r\n      'lat':'45.300063',\r\n      'lng':'18.802725'\r\n     }\r\n   ]\r\n\r\n  constructor(public navCtrl: NavController) {\r\n\r\n  }\r\n\r\n  ionViewDidLoad(){\r\n    this.loadMap();\r\n  }\r\n\r\n  loadMap(){\r\n    let latLng = new google.maps.LatLng('45.286674','18.802124');\r\n    let mapOptions = {\r\n      center:latLng,\r\n      zoom:11,\r\n      mapTypeId: google.maps.MapTypeId.ROADMAP\r\n    }\r\n\r\n    this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);\r\n\r\n    for (let lokacija of this.mojeLokacije){\r\n        this.addMarker(lokacija, lokacija['name']);\r\n    }\r\n\r\n  }\r\n\r\n  addMarker(posInfo,info){\r\n    let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);\r\n\r\n    let marker = new google.maps.Marker({\r\n      map: this.map,\r\n      animation: google.maps.Animation.DROP,\r\n      position: position\r\n    });\r\n    let markerInfo = info;\r\n    this.addInfo(marker, markerInfo);\r\n  }\r\n\r\n  addInfo(marker, content){\r\n    let infoWindow = new google.maps.InfoWindow({\r\n      content: content\r\n    });\r\n\r\n    google.maps.event.addListener(marker, 'click', () => {\r\n     infoWindow.open(this.map, marker);\r\n    })\r\n  }\r\n\r\n} <\/pre>\n
U nastavku mo\u017eemo vidjeti markere s dodatnim informacijama.
\n\"Ionic3<\/a><\/p>\n
Popis lokacija s fokusom<\/h2>\n
Sada \u0107emo napraviti popis lokacija koji \u0107e se nalaziti ispod same mape. Klikom na neku od lokacija mapa \u0107e se automatski pozicionirati na odabranu lokaciju.<\/p>\n
Za po\u010detak \u0107emo napraviti malo mjesta ispod mape<\/p>\n
page-home {\r\n  #map {\r\n      width: 100%;\r\n      height: 70%;\r\n  }\r\n}<\/pre>\n
Nakon toga napravit \u0107emo pripremu za ispis lokacija<\/p>\n
<ion-header>\r\n  <ion-navbar>\r\n    <ion-title>\r\n      Ionic3GoogleMaps\r\n    <\/ion-title>\r\n  <\/ion-navbar>\r\n<\/ion-header>\r\n\r\n<ion-content>\r\n\r\n<div #map id=\"map\"><\/div>\r\n<ion-list>\r\n  <button ion-item (click)=\"focusMap(lokacija)\" *ngFor=\"let lokacija of mojeLokacije\">\r\n  <ion-icon name=\"locate\" item-left small><\/ion-icon>\r\n  {{lokacija.name}}\r\n  <\/button>\r\n<\/ion-list>\r\n\r\n<\/ion-content><\/pre>\n
I sada smo spremni za kreiranje funkcije koja \u0107e nam omogu\u0107iti fokus na odabranu lokaciju<\/p>\n
import { Component, ViewChild, ElementRef } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\n\r\ndeclare var google;\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n  @ViewChild('map') mapElmt: ElementRef;\r\n  map: any;\r\n\r\n   mojeLokacije = [\r\n     {\r\n      'name':'Stadion HNK Cibalia',\r\n      'lat':'45.283666',\r\n      'lng':'18.797286'\r\n     },\r\n     {\r\n      'name':'Op\u0107a \u017eupanijska bolnica Vinkovci',\r\n      'lat':'45.292581',\r\n      'lng':'18.818271'\r\n     },\r\n     {\r\n      'name':'Jezero Banja, Vinkovci',\r\n      'lat':'45.286323',\r\n      'lng':'18.784025'\r\n     },\r\n     {\r\n      'name':'\u017deljezni\u010dki kolodvor (postaja) Vinkovci',\r\n      'lat':'45.300063',\r\n      'lng':'18.802725'\r\n     }\r\n   ]\r\n\r\n  constructor(public navCtrl: NavController) {\r\n\r\n  }\r\n\r\n  ionViewDidLoad(){\r\n    this.loadMap();\r\n  }\r\n\r\n  loadMap(){\r\n    let latLng = new google.maps.LatLng('45.286674','18.802124');\r\n    let mapOptions = {\r\n      center:latLng,\r\n      zoom:11,\r\n      mapTypeId: google.maps.MapTypeId.ROADMAP\r\n    }\r\n\r\n    this.map = new google.maps.Map(this.mapElmt.nativeElement, mapOptions);\r\n\r\n    for (let lokacija of this.mojeLokacije){\r\n        this.addMarker(lokacija, lokacija['name']);\r\n    }\r\n\r\n  }\r\n\r\n  addMarker(posInfo,info){\r\n    let position = new google.maps.LatLng(posInfo['lat'],posInfo['lng']);\r\n\r\n    let marker = new google.maps.Marker({\r\n      map: this.map,\r\n      animation: google.maps.Animation.DROP,\r\n      position: position\r\n    });\r\n    let markerInfo = info;\r\n    this.addInfo(marker, markerInfo);\r\n  }\r\n\r\n  addInfo(marker, content){\r\n    let infoWindow = new google.maps.InfoWindow({\r\n      content: content\r\n    });\r\n\r\n    google.maps.event.addListener(marker, 'click', () => {\r\n     infoWindow.open(this.map, marker);\r\n    })\r\n  }\r\n\r\n  focusMap(lokacija){\r\n   let position = new google.maps.LatLng(lokacija['lat'],lokacija['lng']);\r\n   this.map.setCenter(position);\r\n   this.map.setZoom(15);\r\n  }\r\n\r\n}<\/pre>\n
Kona\u010dni rezultat je vidljiv u nastavku
\n\"Ionic3<\/a><\/p>\n
Zaklju\u010dak<\/h2>\n
Ovo je samo dio onoga \u0161to se mo\u017ee posti\u0107i koriste\u0107i Google Maps API<\/a>. Dalje sve ovisi o specifi\u010dnim potrebama va\u0161e Ionic <\/em>aplikacije, ali vjerujem da mo\u017eete posti\u0107i sve \u0161to \u017eelite jer dokumentacija je poprili\u010dno detaljna i za svakoga se mo\u017ee prona\u0107i ne\u0161to korisno. <\/p>\n
{\r\n  \"name\": \"Ionic3-GoogleMaps\",\r\n  \"version\": \"0.0.0\",\r\n  \"author\": \"Tomislav Stankovi\u0107\",\r\n  \"homepage\": \"https:\/\/www.tomislavstankovic.com\/\",\r\n  \"private\": true,\r\n  \"scripts\": {\r\n    \"clean\": \"ionic-app-scripts clean\",\r\n    \"build\": \"ionic-app-scripts build\",\r\n    \"lint\": \"ionic-app-scripts lint\",\r\n    \"ionic:build\": \"ionic-app-scripts build\",\r\n    \"ionic:serve\": \"ionic-app-scripts serve\"\r\n  },\r\n  \"dependencies\": {\r\n    \"@angular\/common\": \"4.0.2\",\r\n    \"@angular\/compiler\": \"4.0.2\",\r\n    \"@angular\/compiler-cli\": \"4.0.2\",\r\n    \"@angular\/core\": \"4.0.2\",\r\n    \"@angular\/forms\": \"4.0.2\",\r\n    \"@angular\/http\": \"4.0.2\",\r\n    \"@angular\/platform-browser\": \"4.0.2\",\r\n    \"@angular\/platform-browser-dynamic\": \"4.0.2\",\r\n    \"@ionic-native\/core\": \"3.6.1\",\r\n    \"@ionic-native\/splash-screen\": \"3.6.1\",\r\n    \"@ionic-native\/status-bar\": \"3.6.1\",\r\n    \"@ionic\/storage\": \"2.0.1\",\r\n    \"ionic-angular\": \"3.1.1\",\r\n    \"ionicons\": \"3.0.0\",\r\n    \"rxjs\": \"5.1.1\",\r\n    \"sw-toolbox\": \"3.4.0\",\r\n    \"zone.js\": \"^0.8.10\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@ionic\/app-scripts\": \"1.3.7\",\r\n    \"typescript\": \"~2.2.1\"\r\n  },\r\n  \"cordovaPlugins\": [\r\n    \"cordova-plugin-whitelist\",\r\n    \"cordova-plugin-console\",\r\n    \"cordova-plugin-statusbar\",\r\n    \"cordova-plugin-device\",\r\n    \"ionic-plugin-keyboard\",\r\n    \"cordova-plugin-splashscreen\"\r\n  ],\r\n  \"cordovaPlatforms\": [],\r\n  \"description\": \"Ionic3GoogleMaps: An Ionic project\"\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
U ovom \u0107u blog postu pokazati kako integrirati Google mape unutar Ionic aplikacije koriste\u0107i JavaScript SDK. Za\u0161to Google Maps? Zato \u0161to je to najjednostavniji i najbolji na\u010din za prikaz mapa sa dosta mogu\u0107nosti i odli\u010dnom dokumentacijom + \u0161to je kori\u0161tenje Google mapa besplatno do odre\u0111ene razine. Native ili JavaScript SDK? U ovom slu\u010daju koristit \u0107emo … Nastavi \u010ditati Ionic 3 – Prikaz Google mape<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":5306,"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":[407,381,400,408],"class_list":["post-5304","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-razvoj","tag-google-mapa","tag-ionic-2","tag-ionic-3","tag-javascript-sdk"],"yoast_head":"\nIonic 3 - Prikaz Google mape - 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\/ionic3-google-maps-karte\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic 3 - Prikaz Google mape - Tomislav Stankovi\u0107\" \/>\n<meta property=\"og:description\" content=\"U ovom \u0107u blog postu pokazati kako integrirati Google mape unutar Ionic aplikacije koriste\u0107i JavaScript SDK. Za\u0161to Google Maps? Zato \u0161to je to najjednostavniji i najbolji na\u010din za prikaz mapa sa dosta mogu\u0107nosti i odli\u010dnom dokumentacijom + \u0161to je kori\u0161tenje Google mapa besplatno do odre\u0111ene razine. Native ili JavaScript SDK? U ovom slu\u010daju koristit \u0107emo … Nastavi \u010ditati Ionic 3 – Prikaz Google mape\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-07T21:07:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-05T17:55:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2017\/05\/ionic-3-javascript-sdk-google-mapa.jpg\" \/>\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\/jpeg\" \/>\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=\"7 minuta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/\"},\"author\":{\"name\":\"Tomislav Stankovi\u0107\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"headline\":\"Ionic 3 – Prikaz Google mape\",\"datePublished\":\"2017-05-07T21:07:36+00:00\",\"dateModified\":\"2019-01-05T17:55:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/\"},\"wordCount\":551,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/ionic-3-javascript-sdk-google-mapa.jpg\",\"keywords\":[\"Google mapa\",\"Ionic 2\",\"Ionic 3\",\"JavaScript SDK\"],\"articleSection\":[\"Mobile\",\"Razvoj\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/\",\"name\":\"Ionic 3 - Prikaz Google mape - Tomislav Stankovi\u0107\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/ionic-3-javascript-sdk-google-mapa.jpg\",\"datePublished\":\"2017-05-07T21:07:36+00:00\",\"dateModified\":\"2019-01-05T17:55:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/ionic-3-javascript-sdk-google-mapa.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/ionic-3-javascript-sdk-google-mapa.jpg\",\"width\":825,\"height\":510,\"caption\":\"Ionic 3 & JavaScript SDK - Prikaz Google mape\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic3-google-maps-karte\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna stranica\",\"item\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic 3 – Prikaz Google mape\"}]},{\"@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 - Prikaz Google mape - 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\/ionic3-google-maps-karte\/","og_locale":"hr_HR","og_type":"article","og_title":"Ionic 3 - Prikaz Google mape - Tomislav Stankovi\u0107","og_description":"U ovom \u0107u blog postu pokazati kako integrirati Google mape unutar Ionic aplikacije koriste\u0107i JavaScript SDK. Za\u0161to Google Maps? Zato \u0161to je to najjednostavniji i najbolji na\u010din za prikaz mapa sa dosta mogu\u0107nosti i odli\u010dnom dokumentacijom + \u0161to je kori\u0161tenje Google mapa besplatno do odre\u0111ene razine. Native ili JavaScript SDK? U ovom slu\u010daju koristit \u0107emo … Nastavi \u010ditati Ionic 3 – Prikaz Google mape","og_url":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/","og_site_name":"Tomislav Stankovi\u0107","article_published_time":"2017-05-07T21:07:36+00:00","article_modified_time":"2019-01-05T17:55:12+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2017\/05\/ionic-3-javascript-sdk-google-mapa.jpg","type":"image\/jpeg"}],"author":"Tomislav Stankovi\u0107","twitter_card":"summary_large_image","twitter_misc":{"Napisao\/la":"Tomislav Stankovi\u0107","Procijenjeno vrijeme \u010ditanja":"7 minuta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/#article","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/"},"author":{"name":"Tomislav Stankovi\u0107","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"headline":"Ionic 3 – Prikaz Google mape","datePublished":"2017-05-07T21:07:36+00:00","dateModified":"2019-01-05T17:55:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/"},"wordCount":551,"commentCount":0,"publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2017\/05\/ionic-3-javascript-sdk-google-mapa.jpg","keywords":["Google mapa","Ionic 2","Ionic 3","JavaScript SDK"],"articleSection":["Mobile","Razvoj"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/","url":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/","name":"Ionic 3 - Prikaz Google mape - Tomislav Stankovi\u0107","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/#primaryimage"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2017\/05\/ionic-3-javascript-sdk-google-mapa.jpg","datePublished":"2017-05-07T21:07:36+00:00","dateModified":"2019-01-05T17:55:12+00:00","breadcrumb":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/#primaryimage","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2017\/05\/ionic-3-javascript-sdk-google-mapa.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2017\/05\/ionic-3-javascript-sdk-google-mapa.jpg","width":825,"height":510,"caption":"Ionic 3 & JavaScript SDK - Prikaz Google mape"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic3-google-maps-karte\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna stranica","item":"https:\/\/www.tomislavstankovic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ionic 3 – Prikaz Google mape"}]},{"@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\/5304","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=5304"}],"version-history":[{"count":41,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/5304\/revisions"}],"predecessor-version":[{"id":8074,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/5304\/revisions\/8074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media\/5306"}],"wp:attachment":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media?parent=5304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/categories?post=5304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/tags?post=5304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}