{"id":28509,"date":"2019-06-19T00:00:00","date_gmt":"2019-06-18T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/maps\/"},"modified":"2021-05-20T19:06:26","modified_gmt":"2021-05-20T17:06:26","slug":"maps-3-angular","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/maps-3-angular\/","title":{"rendered":"Maps <3 Angular"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Giving the right emphasis on geographic data is not always easy. Putting some markers on a map inside a web page it\u2019s not enough to add value to our solution. In this article, we\u2019ll show the best practices on geographical data used in Blexin.<\/p>\n\n\n\n

We\u2019ll show an Angular project using a sub-sample of a large public dataset I published on a public Github repository<\/a> containing information about football stadiums around the world. The data are in JSON format. For each stadium, the following details are available:<\/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
We\u2019ll use tools based on Google libraries, which need an API key that you can create on the developer console<\/a>. Usually, inside the angular project, you put the key in the src\/environment.ts file, in src\/environments folder.<\/p>\n\n\n\n
The dataset contains 46 stadiums grouped in the following way:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This grouping is indeed an interesting information to show on a map. Google Visualization Data Tools offers a Geochart<\/a> component particularly interesting for our purpose. Unfortunately, there isn\u2019t an official Angular porting of this component. Thus, we choose a wrapper<\/a> available on Github. Leaving the installation details to the documentation, we can devote our attention to the following two problems:<\/p>\n\n\n\n
  1. Data formatting<\/li>
  2. Graphic customization<\/li><\/ol>\n\n\n\n
    We need to transform the data according to the Google Chart standard:<\/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
    Possible graphic customization for our chart may be the following:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    We can choose for the value axis a string array containing the colors we want to use (colorAxis). In the example, [\u2018purple\u2019,\u2019blue\u2019,\u2019green\u2019]. The datalessRegionColor is used as the color for the nations without data. Finally, we can customize the map background color (backgroundColor). A different visualization choice is the one using markers with a radius proportional to the value (displayMode: ‘markers’):<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    The following typescript code set the chart options:<\/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
    This is the HTML template:<\/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
    The google-chart component has an event for the selected nation (select) as a polygon. From the passed argument ($event), through its row property, we can extract the name that we\u2019ll pass to a detailed map.<\/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
    The project contains a detail component consisting of a Google map showing the arenas for the selected nation. Changing the selection in the google-chart, the map is repositioned on the corresponding nation and the markers are updated.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    We pass to the detail component (app-details) the selected nation as an @Input():<\/p>\n\n\n
    \n<app-details [nation]='selectedNation'><\/app-details>\n<\/pre><\/div>\n\n\n
    app-details uses a well-known component called Angular Google Maps (agm) available at the following address<\/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 implements OnChanges with the ngOnChanges method where we extract from a service the stadiums belonging to the selected nation. Subscribing to the service method, we can manage the change of the map center, calculated using the arenas latitude and longitude.<\/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
    The calculation of latitude and longitude arithmetical average it’s not enough precise. This might work pretty well at low latitudes, but at higher latitudes it begins to give poor results and completely breaks down near the poles. The conventional method is to convert latitude (\u03d5i) and longitude (\u03bbi) in a three-dimensional point using the following formula:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Now we can calculate the average of these three-dimensional points (on the sphere surface) and convert it again in latitude and longitude using the following formula:<\/p>\n\n\n\n
    \n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
    The code contains an helper class with all the arithmetic conversion formulas. The map center calculation starting from the stadium arrays is the following:<\/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
    With the agm-map component, we can insert markers on the map. In our example, every stadium has its marker. It\u2019s possible to handle the click event on every single marker. To do this, an *ngFor directive it\u2019s enough.<\/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
    We use the markerClick event to center the map on the marker and increase the 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
    Every marker has an info window (agm-info-windows) showing further details about the selected arena.<\/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
    Inside the agm-info-window we can add a link to start further searches (like for example the nearby hotels):<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    The code repository is available at the following address<\/a>.<\/p>\n\n\n\n
    See you next!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
    Let’s see how to show geographic data with Google Maps and Angular<\/p>\n","protected":false},"author":196716245,"featured_media":28484,"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":"","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,"_wpcom_ai_launchpad_first_post":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"{title}\n\n{excerpt}\n\n{url}","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":[688637524],"tags":[688637390],"class_list":["post-28509","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-en","tag-angular-en"],"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\/en\/blog-en\/maps-3-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Maps\" \/>\n<meta property=\"og:description\" content=\"Let's see how to show geographic data with Google Maps and Angular\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/en\/blog-en\/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-05-20T17:06:26+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=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salvatore Sorrentino\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/maps-3-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/maps-3-angular\\\/\"},\"author\":{\"name\":\"Salvatore Sorrentino\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/354db2bc97cac71c2ceeca21a92d5bed\"},\"headline\":\"Maps\",\"datePublished\":\"2019-06-18T22:00:00+00:00\",\"dateModified\":\"2021-05-20T17:06:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/maps-3-angular\\\/\"},\"wordCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/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\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/maps-3-angular\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/maps-3-angular\\\/\",\"name\":\"Maps\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/maps-3-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/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-05-20T17:06:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/354db2bc97cac71c2ceeca21a92d5bed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/maps-3-angular\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/maps-3-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/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\\\/en\\\/blog-en\\\/maps-3-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Maps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/354db2bc97cac71c2ceeca21a92d5bed\",\"name\":\"Salvatore Sorrentino\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\\\/en\\\/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\/en\/blog-en\/maps-3-angular\/","og_locale":"en_US","og_type":"article","og_title":"Maps","og_description":"Let's see how to show geographic data with Google Maps and Angular","og_url":"https:\/\/blexin.com\/en\/blog-en\/maps-3-angular\/","og_site_name":"Blexin","article_published_time":"2019-06-18T22:00:00+00:00","article_modified_time":"2021-05-20T17:06:26+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":{"Written by":"Salvatore Sorrentino","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/en\/blog-en\/maps-3-angular\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/en\/blog-en\/maps-3-angular\/"},"author":{"name":"Salvatore Sorrentino","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/354db2bc97cac71c2ceeca21a92d5bed"},"headline":"Maps","datePublished":"2019-06-18T22:00:00+00:00","dateModified":"2021-05-20T17:06:26+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/maps-3-angular\/"},"wordCount":1,"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/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":"en-US"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/en\/blog-en\/maps-3-angular\/","url":"https:\/\/blexin.com\/en\/blog-en\/maps-3-angular\/","name":"Maps","isPartOf":{"@id":"https:\/\/blexin.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/maps-3-angular\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/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-05-20T17:06:26+00:00","author":{"@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/354db2bc97cac71c2ceeca21a92d5bed"},"breadcrumb":{"@id":"https:\/\/blexin.com\/en\/blog-en\/maps-3-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/en\/blog-en\/maps-3-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blexin.com\/en\/blog-en\/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\/en\/blog-en\/maps-3-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/en\/"},{"@type":"ListItem","position":2,"name":"Maps"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/en\/#website","url":"https:\/\/blexin.com\/en\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/354db2bc97cac71c2ceeca21a92d5bed","name":"Salvatore Sorrentino","image":{"@type":"ImageObject","inLanguage":"en-US","@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\/en\/author\/salvatore-sorrentinoblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_likes_enabled":false,"jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7pP","jetpack_sharing_enabled":true,"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","_links":{"self":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/users\/196716245"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/comments?post=28509"}],"version-history":[{"count":4,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28509\/revisions"}],"predecessor-version":[{"id":31984,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28509\/revisions\/31984"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media\/28484"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media?parent=28509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/categories?post=28509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/tags?post=28509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}