{"id":28482,"date":"2019-06-19T00:00:00","date_gmt":"2019-06-18T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=28482"},"modified":"2021-01-13T09:40:33","modified_gmt":"2021-01-13T08:40:33","slug":"maps-3-angular","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/","title":{"rendered":"Maps <3 Angular"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Dare il giusto rilievo a dati di natura geografica non \u00e8 sempre semplice. Non basta, cio\u00e8, inserire una mappa con qualche marker in una pagina per aggiungere valore alla nostra soluzione. In questo articolo parleremo delle best practices riguardanti dati geografici che usiamo in Blexin.<\/p>\n\n\n\n

L\u2019esempio sar\u00e0 un progetto Angular e useremo come dati di esempio un sottoinsieme di un dataset che ho pubblicato in una repository<\/a> pubblica di Github contenente informazioni sugli stadi di calcio nel mondo. Il formato di dati \u00e8 JSON e per ogni stadio sono disponibili le seguenti informazioni:<\/p>\n\n\n

\n{\n\u00a0"Id":8233,\n\u00a0"Name":"10 de Diciembre",\n\u00a0"Nation":"Mexico",\n\u00a0"Town":"Ciudad Cooperativa Cruz Azul",\n\u00a0"Latitude":19.99395751953125,\n\u00a0"Longitude":-99.325408935546875,\n\u00a0"Capacity":"17.000"\n}\n<\/pre><\/div>\n\n\n
Useremo strumenti messi a disposizione di Google per i quali \u00e8 necessario creare una chiave API sulla developer console<\/a>. La chiave pu\u00f2 essere inserita nel progetto angular all\u2019interno del file environment.ts nel folder src\/environments.<\/p>\n\n\n\n
Il campione di dati a disposizione contiene 46 stadi ripartiti nella maniera seguente:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Questa suddivisione \u00e8 gi\u00e0 un\u2019informazione importante che pu\u00f2 essere mostrata su una mappa. Google offre all\u2019interno della sua suite<\/a> di strumenti di visualizzazione dati un Geochart particolarmente adatto allo scopo. In mancanza di una libreria di componenti Angular ufficiale, abbiamo scelto un wrapper<\/a> della libreria Google Chart. Lasciando i dettagli dell\u2019installazione alla documentazione disponibile su Github, veniamo ai due problemi principali:<\/p>\n\n\n\n
  1. La formattazione dei dati<\/li>
  2. La customizzazione dell\u2019aspetto grafico<\/li><\/ol>\n\n\n\n
    I dati vanno trasformati secondo lo standard dettato dalla libreria Google Chart:<\/p>\n\n\n
    \ngeoSummary = [\n\u00a0\u00a0['Indonesia', 10],\n\u00a0\u00a0['Algeria', 6],\n\u00a0\u00a0['Argentina', 7],\n\u00a0\u00a0['Italy', 10],\n\u00a0\u00a0['Australia', 4],\n\u00a0\u00a0['Netherlands', 4],\n\u00a0\u00a0['Mexico', 5],\n];\n<\/pre><\/div>\n\n\n
    Una possibile scelta delle impostazioni grafiche del chart pu\u00f2 essere la seguente:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Per l\u2019asse dei valori, \u00e8 possibile scegliere un array di stringhe indicanti colori (colorAxis). Nell\u2019esempio ho utilizzato [\u2018purple\u2019,\u2019blue\u2019,\u2019green\u2019]. E\u2019 possibile indicare il colore per le nazioni che non hanno rappresentanza (datalessRegionColor) e poi il colore di sfondo della mappa (backgroundColor). Una scelta alternativa \u00e8 quella dei markers che hanno un raggio proporzionale al valore da mostrare (displayMode: ‘markers’):<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Il codice typescript che imposta il componente \u00e8 il seguente:<\/p>\n\n\n
    \nprivate SetChart(data: any): MyChart\u00a0 {\n\u00a0\u00a0\u00a0\u00a0const mychart: MyChart = {\n\u00a0\u00a0\u00a0\u00a0\u00a0type: 'GeoChart',\n\u00a0\u00a0\u00a0\u00a0\u00a0data,\n\u00a0\u00a0\u00a0\u00a0\u00a0options: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0colorAxis: {colors: ['purple', 'blue', 'green']},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0backgroundColor: '#81d4fa',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0datalessRegionColor: 'white'\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0return mychart;\n}\n<\/pre><\/div>\n\n\n
    Questo \u00e8 invece il template html:<\/p>\n\n\n
    \n<google-chart class="chart"\n\u00a0\u00a0\u00a0[height]="400"\n\u00a0\u00a0\u00a0[type]="myChangingCart.type"\n\u00a0\u00a0\u00a0[data]="myChangingCart.data"\n\u00a0\u00a0\u00a0[options]="myChangingCart.options"\n\u00a0\u00a0\u00a0(select)="onSelect($event)">\n<\/google-chart>\n<\/pre><\/div>\n\n\n
    Il componente google-chart offre l\u2019evento di selezione di una nazione (intesa come poligono) sulla mappa (select). L\u2019argomento passato offre una propriet\u00e0 row collegabile all\u2019array di dati utilizzato. La nazione selezionata (come nome) verr\u00e0 utilizzata per mostrare la mappa di dettaglio.<\/p>\n\n\n
    \nonSelect(event: ChartEvent) {\n\u00a0\u00a0\u00a0if (event && event[0] && event[0].row >= 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0const row = event[0].row;\n\u00a0\u00a0\u00a0\u00a0\u00a0this.selectedNation = this.geoSummary[row][0];\n\u00a0\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
    Il progetto contiene un componente di dettaglio consistente in una mappa di Google mostrante gli stadi della nazione selezionata. Al cambiare della selezione nel componente principale, la mappa viene centrata sulla nazione corrispondente e i marker degli stadi vengono aggiornati.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Al componente di dettaglio (app-details), quindi, viene passata come @Input() la stringa indicante la nazione selezionata:<\/p>\n\n\n
    \n<app-details [nation]='selectedNation'><\/app-details>\n<\/pre><\/div>\n\n\n
    app-details utilizza un componente molto noto chiamato Angular Google Maps (agm) disponibile al seguente indirizzo<\/a>.<\/p>\n\n\n
    \n<agm-map #map [zoom]="zoom" [latitude]="latitude" [longitude]="longitude"\n\u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0[mapTypeId]="'hybrid'">\n<\/agm-map>\n<\/pre><\/div>\n\n\n
    app-details implementa OnChanges nel metodo ngOnChanges, dove estraiamo da un servizio gli stadi appartenenti alla nazione selezionata. Nel subscribe al metodo del servizio gestiamo anche il cambio del centro della mappa, calcolato usando le latitudini e longitudini degli stadi.<\/p>\n\n\n
    \nngOnChanges(changes: SimpleChanges): void {\n\u00a0\u00a0\u00a0this.zoom = 4;\n\u00a0\u00a0\u00a0this.nation = changes.nation.currentValue;\n\u00a0\u00a0\u00a0if (this.nation.length > 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0this.data.getArenas(this.nation).subscribe(x => {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.arenas = x;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.center = this.centerMap();\n\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
    Non basta per\u00f2 calcolare le medie aritmetiche delle latitudini e longitudini. Questo metodo funziona bene a basse latitudini ma tende a peggiorare a latitudini pi\u00f9 alte fino a divergere all\u2019avvicinarsi ai poli. Il metodo convenzionale \u00e8 quello di convertire latitudine (\u03d5i) e longitudine (\u03bbi) in un punto tridimensionale usando la seguente formula:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Ora \u00e8 possibile trovare la media di questi punti tridimensionali (ossia un punto sulla sfera) e convertirla nuovamente in latitudine longitudine a partire dalla seguente relazione:<\/p>\n\n\n\n
    \n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
    Il codice contiene una classe helper per gestire tutte queste operazioni aritmetiche di conversione. Il calcolo del centro della mappa a partire dall\u2019array degli stadi \u00e8 il seguente:<\/p>\n\n\n
    \nprivate centerMap(): MyCoordinates {\n\u00a0\u00a0\u00a0const helper = new GeographicalHelper();\n\u00a0\u00a0\u00a0const total = this.arenas.length;\n\u00a0\n\u00a0\u00a0\u00a0if (total > 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0const points = this.ThreeDimensionalPointsOfArenas(this.arenas);\n\u00a0\u00a0\u00a0\u00a0\u00a0const averagePoint = helper.calculateAveragePoint(points);\n\u00a0\u00a0\u00a0\u00a0\u00a0return helper.convertThreeDimensionalPointToLatitudeAndLongitude(averagePoint);\n\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0return { latitude : 0, longitude : 0};\n}\n\u00a0\nprivate ThreeDimensionalPointsOfArenas(arenas: Arena[]): ThreeDimensionalPoint[] {\n\u00a0\u00a0\u00a0const helper = new GeographicalHelper();\n\u00a0\u00a0\u00a0const points = [];\n\u00a0\u00a0\u00a0arenas.forEach( arena => {\n\u00a0\u00a0\u00a0\u00a0\u00a0points.push(helper.convertLatitudeAndLongitudeToThreeDimensionalPoint({latitude: arena.Latitude, longitude: arena.Longitude}));\n\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0return points;\n}\n<\/pre><\/div>\n\n\n
    Il componente agm-map consente di inserire dei marker sulla mappa. Nel nostro esempio, per ogni arena inseriamo un marker. E\u2019 possibile anche gestire l\u2019evento di click del singolo marker. E\u2019 sufficiente innestare nel componente agm-map un *ngFor.<\/p>\n\n\n
    \n<agm-map [zoom]="zoom" [latitude]="center.latitude" [longitude]="center.longitude"\n\u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0[mapTypeId]="'hybrid'">\n\u00a0\u00a0\u00a0 \u00a0<agm-marker \u00a0*ngFor="let locationItem of arenas;"\n\u00a0\u00a0\u00a0 \u00a0[latitude]="locationItem.Latitude" [longitude]="locationItem.Longitude"\n\u00a0\u00a0\u00a0 \u00a0(markerClick)="clickedMarker($event)">\n\u00a0\u00a0\u00a0 \u00a0<\/agm-marker>\n<\/agm-map>\n<\/pre><\/div>\n\n\n
    Possiamo sfruttare l\u2019evento markerClick per centrare la mappa sul marker e aumentare lo zoom.<\/p>\n\n\n
    \nclickedMarker(info: any) {\n\u00a0\u00a0\u00a0this.zoom = 16;\n\u00a0\u00a0\u00a0this.center.latitude = info.latitude;\n\u00a0\u00a0\u00a0this.center.longitude = info.longitude;\n}\n<\/pre><\/div>\n\n\n
    Ad ogni marker, infine, possiamo associare una finestra informativa (agm-info-window) per mostrare informazioni pi\u00f9 dettagliate sullo stadio selezionato.<\/p>\n\n\n
    \n<agm-marker \u00a0*ngFor="let locationItem of arenas;"\n\u00a0\u00a0\u00a0 \u00a0[latitude]="locationItem.Latitude" [longitude]="locationItem.Longitude"\n\u00a0\u00a0\u00a0 \u00a0(markerClick)="clickedMarker($event)">\n\u00a0\u00a0\u00a0 \u00a0 \u00a0<agm-info-window #info [disableAutoPan]="true">\n\u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class="card">\n\u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class="card-body">\n\u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<h5 class="card-title">{{locationItem.Name}}<\/h5>\n\u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h6 class="card-subtitle mb-1">Capacity:{{locationItem.Capacity}}<\/h6>\n\u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<a (click)="findHotels(locationItem)" class="card-link">\nClick to find nearby hotels<\/a>\n\u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<\/div>\n\u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<\/div>\n\u00a0\u00a0\u00a0 \u00a0 \u00a0<\/agm-info-window>\n<\/agm-marker>\n<\/pre><\/div>\n\n\n
    Nella agm-info-window possiamo aggiungere un link per avviare ulteriori ricerche (ad esempio gli alberghi in zona):<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    La repository del progetto \u00e8 disponibile al seguente indirizzo<\/a>.<\/p>\n\n\n\n
    Alla prossima!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
    Vediamo come mostrare informazioni geografiche con Google Maps e Angular<\/p>\n","protected":false},"author":196716245,"featured_media":28483,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637374],"tags":[688637387],"class_list":["post-28482","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-angular"],"yoast_head":"\nMaps<\/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:\/\/blexin.com\/it\/blog\/maps-3-angular\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Maps\" \/>\n<meta property=\"og:description\" content=\"Vediamo come mostrare informazioni geografiche con Google Maps e Angular\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-18T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-13T08:40:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/427c6883-62cc-44c1-be0d-4ffb824978ed.png?fit=1024%2C608&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"608\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salvatore Sorrentino\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salvatore Sorrentino\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/maps-3-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/maps-3-angular\\\/\"},\"author\":{\"name\":\"Salvatore Sorrentino\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/354db2bc97cac71c2ceeca21a92d5bed\"},\"headline\":\"Maps\",\"datePublished\":\"2019-06-18T22:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/maps-3-angular\\\/\"},\"wordCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/maps-3-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/427c6883-62cc-44c1-be0d-4ffb824978ed.png?fit=1024%2C608&ssl=1\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/maps-3-angular\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/maps-3-angular\\\/\",\"name\":\"Maps\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/maps-3-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/maps-3-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/427c6883-62cc-44c1-be0d-4ffb824978ed.png?fit=1024%2C608&ssl=1\",\"datePublished\":\"2019-06-18T22:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:33+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/354db2bc97cac71c2ceeca21a92d5bed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/maps-3-angular\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/maps-3-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/maps-3-angular\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/427c6883-62cc-44c1-be0d-4ffb824978ed.png?fit=1024%2C608&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/427c6883-62cc-44c1-be0d-4ffb824978ed.png?fit=1024%2C608&ssl=1\",\"width\":1024,\"height\":608},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/maps-3-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Maps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/354db2bc97cac71c2ceeca21a92d5bed\",\"name\":\"Salvatore Sorrentino\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g\",\"caption\":\"Salvatore Sorrentino\"},\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/author\\\/salvatore-sorrentinoblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Maps","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:\/\/blexin.com\/it\/blog\/maps-3-angular\/","og_locale":"it_IT","og_type":"article","og_title":"Maps","og_description":"Vediamo come mostrare informazioni geografiche con Google Maps e Angular","og_url":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/","og_site_name":"Blexin","article_published_time":"2019-06-18T22:00:00+00:00","article_modified_time":"2021-01-13T08:40:33+00:00","og_image":[{"width":1024,"height":608,"url":"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/427c6883-62cc-44c1-be0d-4ffb824978ed.png?fit=1024%2C608&ssl=1","type":"image\/png"}],"author":"Salvatore Sorrentino","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Salvatore Sorrentino","Tempo di lettura stimato":"5 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/"},"author":{"name":"Salvatore Sorrentino","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/354db2bc97cac71c2ceeca21a92d5bed"},"headline":"Maps","datePublished":"2019-06-18T22:00:00+00:00","dateModified":"2021-01-13T08:40:33+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/"},"wordCount":1,"image":{"@id":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/427c6883-62cc-44c1-be0d-4ffb824978ed.png?fit=1024%2C608&ssl=1","keywords":["Angular"],"articleSection":["Blog"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/","url":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/","name":"Maps","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/427c6883-62cc-44c1-be0d-4ffb824978ed.png?fit=1024%2C608&ssl=1","datePublished":"2019-06-18T22:00:00+00:00","dateModified":"2021-01-13T08:40:33+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/354db2bc97cac71c2ceeca21a92d5bed"},"breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/maps-3-angular\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/427c6883-62cc-44c1-be0d-4ffb824978ed.png?fit=1024%2C608&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/427c6883-62cc-44c1-be0d-4ffb824978ed.png?fit=1024%2C608&ssl=1","width":1024,"height":608},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/maps-3-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"Maps"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/it\/#website","url":"https:\/\/blexin.com\/it\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/354db2bc97cac71c2ceeca21a92d5bed","name":"Salvatore Sorrentino","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g","caption":"Salvatore Sorrentino"},"url":"https:\/\/blexin.com\/it\/author\/salvatore-sorrentinoblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/427c6883-62cc-44c1-be0d-4ffb824978ed.png?fit=1024%2C608&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7po","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/users\/196716245"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/comments?post=28482"}],"version-history":[{"count":9,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28482\/revisions"}],"predecessor-version":[{"id":28513,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28482\/revisions\/28513"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/28483"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=28482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=28482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=28482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}