Google Maps & Angular Tutorial - Quickstart Using the Google Maps Javascript API

hi and welcome this video is about how to start with google maps in angular using the google maps javascript library this is the result what we will have in the end before we start we must enable the google maps api in our google cloud project make sure you are locked in google cloud console and you have a project selected then go to the navigation menu and you select apis and services and then here under library you have the search bar and then you can search for maps and then you have this here maps javascript api so select that and then in this menu you must enable this api so after that you must create an api key so go back to the navigation menu and apis and services and then in the submenu credentials and here you have a list of api keys and other credentials you must create an api key so go here create credentials and then select api key and now google has generated an api key for you this is the one what you need so just copy it and later you will use it and now i am taking a quick look at the maps javascript api guide here in the overview there is a description on how to load the javascript library in your browser application just scroll down here this section here you can load the library by providing a script tag in your html file or you can load it dynamically with via javascript also there is a library loader available you install a package and then you can use a loader so using this loader is my choice for this video also there is a reference to using typescript so here it tells us that we can install this node package in order to use typescript types also there are some more infos like compiler options configuration or importing the module so in my angular project the first thing i'm going to do is installing the maps api loader and after that i am installing the typescript types of google maps and at last i am configuring the compiler options in the typescript app.json file i add the namespace google maps to the types array and now i can start implementing google maps in my web page at first i add a div with an id this id here is important then i set the class of the div in the style sheet i change the width and the height of this class so i set the width to 100 viewports and the height is also 100 viewport right with that the map will cover the whole page now i can go to the component class at first i implement the on init method so here in the init method i start the api loader and it is a new loader of this google maps package and i provide some parameters and here i can paste the api key so with that loader i can say load and then when the api has been loaded i can say then and then provide a handler function so within the handler function i can finally create a new google map instance i'll say new google maps map at first i must provide a reference to the html element where the map should be displayed for that i can say document get element by id and here i provide the idea of the div which i have just created map and after that i can provide some map options for the map options i can say the center of the camera and always provide latitude and longitude and then i can provide a zoom factor so let's save that and take a look at the result and there you go guys now the google maps has been initialized in the map options you can also set styles for the map the map styles are very complex for that you can visit a map style editor this webpage here map style with google.com here you can specify the details like roads labels and you can select a theme for your map for example dark or raidro there are even more detail settings down here you have more options and then for example you can change the watercolor here and fill and let's change it to [Music] to yellow and there you go once you are done customizing your map you can click on finish and then you can copy this array here and then you can assign that array to the styles attribute of the maps options so let's save that and take a look at the result and there you go alright thanks for watching and have a nice day

Channel: Genka

Views: 22,966

Keywords:

Id: 7P5Oj8heApU

Length: 6min 8sec (368 seconds)

Published: Sun Mar 21 2021