{"id":3590,"date":"2022-10-07T15:50:05","date_gmt":"2022-10-07T10:50:05","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3590"},"modified":"2022-10-07T15:50:08","modified_gmt":"2022-10-07T10:50:08","slug":"angular-13-google-maps-javascript-api-example","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/","title":{"rendered":"Angular 13 Google Maps JavaScript API Example"},"content":{"rendered":"\n

In this tutorial, I will teach you how to embed Google Maps with a marker using Angular 13, TypeScript, and Google Maps JavaScript API. The complete source code of Angular Google Maps integration is given below.<\/p>\n\n\n\n

ng new googlemap<\/pre><\/div>\n\n\n\n
npm i @googlemaps\/js-api-loader<\/pre><\/div>\n\n\n\n
Source Code of Angular 13 Google Maps JavaScript API Example<\/h2>\n\n\n\n
app.component.ts<\/h3>\n\n\n\n
Important Note: On line # 18, replace ###your_api_key###<\/code> with your actual Google Maps API key.<\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\nimport { Loader } from '@googlemaps\/js-api-loader';\nimport { styles } from '.\/mapstyles';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent implements OnInit {\n\n  title = 'google-maps';\n\n  private map: google.maps.Map\n\n  ngOnInit(): void {\n    let loader = new Loader({\n      apiKey: '###your_api_key###',\n    });\n\n    loader.load().then(() => {\n      console.log('loaded gmaps')\n\n      const location = { lat: 51.233334, lng: \t6.783333 }\n\n      this.map = new google.maps.Map(document.getElementById("map"), {\n        center: location,\n        zoom: 6,\n        styles: styles\n      })\n\n      const marker = new google.maps.Marker({\n        position: location,\n        map: this.map,\n      });\n    })\n  }\n}<\/pre><\/div>\n\n\n\n
app.component.html<\/h3>\n\n\n\n
<div class="full" id="map">\n\n<\/div><\/pre><\/div>\n\n\n\n
app.component.css<\/h3>\n\n\n\n
.full {\n  width: 100vw;\n  height: 100vh;\n}<\/pre><\/div>\n\n\n\n
Now create a\u00a0styles\u00a0object for styling the map.<\/p>\n\n\n\n
mapstyles.ts<\/h3>\n\n\n\n
export const styles = [\n  {\n    "elementType": "geometry",\n    "stylers": [\n      {\n        "color": "#ebe3cd"\n      }\n    ]\n  },\n  {\n    "elementType": "labels.text.fill",\n    "stylers": [\n      {\n        "color": "#523735"\n      }\n    ]\n  },\n  {\n    "elementType": "labels.text.stroke",\n    "stylers": [\n      {\n        "color": "#f5f1e6"\n      }\n    ]\n  },\n  {\n    "featureType": "administrative",\n    "elementType": "geometry.stroke",\n    "stylers": [\n      {\n        "color": "#c9b2a6"\n      }\n    ]\n  },\n  {\n    "featureType": "administrative.land_parcel",\n    "elementType": "geometry.stroke",\n    "stylers": [\n      {\n        "color": "#dcd2be"\n      }\n    ]\n  },\n  {\n    "featureType": "administrative.land_parcel",\n    "elementType": "labels.text.fill",\n    "stylers": [\n      {\n        "color": "#ae9e90"\n      }\n    ]\n  },\n  {\n    "featureType": "landscape.natural",\n    "elementType": "geometry",\n    "stylers": [\n      {\n        "color": "#dfd2ae"\n      }\n    ]\n  },\n  {\n    "featureType": "poi",\n    "elementType": "geometry",\n    "stylers": [\n      {\n        "color": "#dfd2ae"\n      }\n    ]\n  },\n  {\n    "featureType": "poi",\n    "elementType": "labels.text.fill",\n    "stylers": [\n      {\n        "color": "#93817c"\n      }\n    ]\n  },\n  {\n    "featureType": "poi.park",\n    "elementType": "geometry.fill",\n    "stylers": [\n      {\n        "color": "#a5b076"\n      }\n    ]\n  },\n  {\n    "featureType": "poi.park",\n    "elementType": "labels.text.fill",\n    "stylers": [\n      {\n        "color": "#447530"\n      }\n    ]\n  },\n  {\n    "featureType": "road",\n    "elementType": "geometry",\n    "stylers": [\n      {\n        "color": "#f5f1e6"\n      }\n    ]\n  },\n  {\n    "featureType": "road.arterial",\n    "elementType": "geometry",\n    "stylers": [\n      {\n        "color": "#fdfcf8"\n      }\n    ]\n  },\n  {\n    "featureType": "road.highway",\n    "elementType": "geometry",\n    "stylers": [\n      {\n        "color": "#f8c967"\n      }\n    ]\n  },\n  {\n    "featureType": "road.highway",\n    "elementType": "geometry.stroke",\n    "stylers": [\n      {\n        "color": "#e9bc62"\n      }\n    ]\n  },\n  {\n    "featureType": "road.highway.controlled_access",\n    "elementType": "geometry",\n    "stylers": [\n      {\n        "color": "#e98d58"\n      }\n    ]\n  },\n  {\n    "featureType": "road.highway.controlled_access",\n    "elementType": "geometry.stroke",\n    "stylers": [\n      {\n        "color": "#db8555"\n      }\n    ]\n  },\n  {\n    "featureType": "road.local",\n    "elementType": "labels.text.fill",\n    "stylers": [\n      {\n        "color": "#806b63"\n      }\n    ]\n  },\n  {\n    "featureType": "transit.line",\n    "elementType": "geometry",\n    "stylers": [\n      {\n        "color": "#dfd2ae"\n      }\n    ]\n  },\n  {\n    "featureType": "transit.line",\n    "elementType": "labels.text.fill",\n    "stylers": [\n      {\n        "color": "#8f7d77"\n      }\n    ]\n  },\n  {\n    "featureType": "transit.line",\n    "elementType": "labels.text.stroke",\n    "stylers": [\n      {\n        "color": "#ebe3cd"\n      }\n    ]\n  },\n  {\n    "featureType": "transit.station",\n    "elementType": "geometry",\n    "stylers": [\n      {\n        "color": "#dfd2ae"\n      }\n    ]\n  },\n  {\n    "featureType": "water",\n    "elementType": "geometry.fill",\n    "stylers": [\n      {\n        "color": "#b9d3c2"\n      },\n      {\n        "saturation": 25\n      },\n      {\n        "weight": 3.5\n      }\n    ]\n  },\n  {\n    "featureType": "water",\n    "elementType": "geometry.stroke",\n    "stylers": [\n      {\n        "color": "#14fbff"\n      }\n    ]\n  },\n  {\n    "featureType": "water",\n    "elementType": "labels.text.fill",\n    "stylers": [\n      {\n        "color": "#92998d"\n      }\n    ]\n  }\n]<\/pre><\/div>\n\n\n\n
Project Screenshot<\/h2>\n\n\n\n
\"Angular
Angular 13 Google Maps Integration<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, I will teach you how to embed Google Maps with a marker using Angular 13, TypeScript, and Google Maps JavaScript API. The complete source code of Angular Google Maps integration is given below. Source Code of Angular 13 Google Maps JavaScript API Example app.component.ts Important Note: On line # 18, replace ###your_api_key### … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3593,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3590","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nAngular 13 Google Maps JavaScript API Example<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will teach you how to embed Google Maps with a marker using Angular 13, TypeScript, and Google Maps JavaScript API. The complete\" \/>\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.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 13 Google Maps JavaScript API Example\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will teach you how to embed Google Maps with a marker using Angular 13, TypeScript, and Google Maps JavaScript API. The complete\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T10:50:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-07T10:50:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Angular_13_Google_Maps_JavaScript_API_Example.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular 13 Google Maps JavaScript API Example","description":"In this tutorial, I will teach you how to embed Google Maps with a marker using Angular 13, TypeScript, and Google Maps JavaScript API. The complete","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.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/","og_locale":"en_US","og_type":"article","og_title":"Angular 13 Google Maps JavaScript API Example","og_description":"In this tutorial, I will teach you how to embed Google Maps with a marker using Angular 13, TypeScript, and Google Maps JavaScript API. The complete","og_url":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-07T10:50:05+00:00","article_modified_time":"2022-10-07T10:50:08+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Angular_13_Google_Maps_JavaScript_API_Example.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Angular 13 Google Maps JavaScript API Example","datePublished":"2022-10-07T10:50:05+00:00","dateModified":"2022-10-07T10:50:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/"},"wordCount":88,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Angular_13_Google_Maps_JavaScript_API_Example.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/","url":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/","name":"Angular 13 Google Maps JavaScript API Example","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Angular_13_Google_Maps_JavaScript_API_Example.jpg","datePublished":"2022-10-07T10:50:05+00:00","dateModified":"2022-10-07T10:50:08+00:00","description":"In this tutorial, I will teach you how to embed Google Maps with a marker using Angular 13, TypeScript, and Google Maps JavaScript API. The complete","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Angular_13_Google_Maps_JavaScript_API_Example.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Angular_13_Google_Maps_JavaScript_API_Example.jpg","width":880,"height":495,"caption":"Angular 13 Google Maps JavaScript API Example"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/angular-13-google-maps-javascript-api-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular 13 Google Maps JavaScript API Example"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3590"}],"version-history":[{"count":2,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3590\/revisions"}],"predecessor-version":[{"id":3594,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3590\/revisions\/3594"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3593"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}