\ninstall -g @angular\/cli@latest\n<\/pre><\/div>\n\n\nIf you are in a previous Angular app project adding the Google Map and need to update Angular from 10 to 11 for example, you can do this<\/p>\n\n\n
\nng update @angular\/cli @angular\/core\n<\/pre><\/div>\n\n\nNow let us first enable the API so we can actually load the Google Maps. It’s less work than you’d think, specially if you have a Google Cloud account already. If you don’t you have to create one so you can login to the Google Cloud Console<\/a>. Now, to enable:<\/p>\n\n\n\n- Go to your project and then enable the API.
Search for “Maps JavaScript API” which should take you here<\/a>. <\/li>- Create credentials so you can get an API key for the Google Maps API (if you haven’t already) <\/li><\/ol>\n\n\n\n
I will now create a new project Angular 11 project from scratch. <\/p>\n\n\n
\nng new mymapproject\n<\/pre><\/div>\n\n\n
- I get the question: Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
This setting helps improve maintainability and catch bugs ahead of time.
For more information, see https:\/\/angular.io\/strict<\/em>
My answer is no<\/strong>.<\/li>- Another question: Would you like to add Angular routing? (y\/N)<\/em>
My answer is yes<\/strong>.<\/li>- Which stylesheet format would you like to use? <\/em>CSS<\/strong><\/li><\/ul>\n\n\n\n
Remember to cd your way into your app root folder since you want to run commands in there.<\/p>\n\n\n
\n cd .\\mymapproject\\\n<\/pre><\/div>\n\n\nThen I will create a new module file called tutorial-google-maps.module.ts<\/strong> with this ts code<\/p>\n\n\n\nimport { NgModule } from '@angular\/core';\nimport { GoogleMapsModule } from '@angular\/google-maps';\nimport { CommonModule } from '@angular\/common';\nimport { HttpClientModule, HttpClientJsonpModule } from '@angular\/common\/http';\nimport { TutorialGoogleMapsComponent } from '.\/tutorial-google-maps\/tutorial-google-maps.component';\n\n@NgModule({\n declarations: [\n TutorialGoogleMapsComponent,\n ],\n imports: [\n CommonModule,\n GoogleMapsModule,\n HttpClientModule,\n HttpClientJsonpModule,\n ],\n exports: [\n TutorialGoogleMapsComponent,\n ],\n})\nexport class TutorialGoogleMapsModule {}\n<\/pre><\/div>\n\n\nLet us now download the package for @angular\/google-maps<\/strong> like this:<\/p>\n\n\n\nnpm i @angular\/google-maps\n<\/pre><\/div>\n\n\nOne less error. Of course, we don’t have a component for the tutorial-google-maps.component yet so there is an error there, but we will add one. Let’s use the generate CLI command:<\/p>\n\n\n
\nng g component TutorialGoogleMaps --module tutorial-google-maps.module\n<\/pre><\/div>\n\n\nLet’s add the actual Google map to our newly created component! First, let’s add some code for tutorial-google-maps.component.ts<\/strong> <\/p>\n\n\n\nimport { Component, OnInit } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\nimport { of } from 'rxjs\/internal\/observable\/of';\nimport { map, catchError } from 'rxjs\/operators';\n@Component({\n selector: 'app-tutorial-google-maps',\n templateUrl: '.\/tutorial-google-maps.component.html',\n styleUrls: ['.\/tutorial-google-maps.component.css']\n})\nexport class TutorialGoogleMapsComponent implements OnInit {\n apiLoaded: Observable<boolean>;\n \n constructor(httpClient: HttpClient) {\n this.apiLoaded = httpClient.jsonp('https:\/\/maps.googleapis.com\/maps\/api\/js?key=[Your API Key here]', 'callback')\n .pipe(\n map(() => true),\n catchError(() => of(false)),\n );\n }\n\n ngOnInit(): void {\n }\n}\n<\/pre><\/div>\n\n\nDon’t forget the imports for the rxjs.<\/p>\n\n\n\n
Change the X<\/strong> to your own API key which you can find in the API & Services -> Credentials page in Google Cloud Console.<\/p>\n\n\n\nThen we are ready to have the element like this in our tutorial-google-maps.component.html<\/strong> file:<\/p>\n\n\n\n<div *ngIf="apiLoaded | async">\n <google-map><\/google-map>\n<\/div>\n<\/pre><\/div>\n\n\nNext step is to add our Module to the app module in the app.module.ts<\/strong> file<\/p>\n\n\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n TutorialGoogleMapsModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n<\/pre><\/div>\n\n\n<\/p>\n\n\n\n
Now let’s add a element which refers to our component, go to app.component.html<\/strong> as seen in the picture below. Then what I’ve did is that I added the code just above <!– Next Steps –> comment which comes from the generated markup by Angular. You can obviously change everything on this page however you want. <\/p>\n\n\n\n <app-tutorial-google-maps><\/app-tutorial-google-maps>\n<\/pre><\/div>\n\n\n![\"\"](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/01\/image-1-1024x586.png\")
View from VS Code<\/figcaption><\/figure>\n\n\n\nLet’s try run our app! <\/p>\n\n\n
\nng serve\n<\/pre><\/div>\n\n\nWhat will happen? Let’s see..<\/p>\n\n\n\n![\"Google](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/01\/image-2.png\")
the result of adding google maps to our Angular app<\/figcaption><\/figure>\n\n\n\nAnd there we go, we have the map! Looks good I would say \ud83d\ude42 <\/p>\n\n\n\n
If you are unlucky as me, then you might encounter the issue where you get spammed with bunch of errors about MouseEvent like this in your terminal:<\/p>\n\n\n\n
node_modules\/@angular\/google-maps\/map-marker\/map-marker.d.ts:136:40 – error TS2694: Namespace ‘google.maps’ has no exported member ‘MouseEvent’.<\/em><\/p>\n\n\n\n But do not fear. The solution is to add googlemaps types<\/strong> in your packages.json file<\/strong> under your devDependencies <\/strong>like this<\/p>\n\n\n\n"@types\/googlemaps": "3.39.14"\n<\/pre><\/div>\n\n\n![\"\"](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/01\/image-4.png\")
<\/figure><\/div>\n\n\n\nadd this line and then do another install of your packages<\/p>\n\n\n
\nnpm i\n<\/pre><\/div>\n\n\nand try the application again with serve. Now it should look good in your terminal!<\/p>\n\n\n\n
Change location of the Google Map<\/h2>\n\n\n\n
Let us change the location for the Google Map. Create an object which holds various settings for our map including latitude and longitude. Add this property to your TutorialGoogleMapsComponent class inside the tutorial-google-maps.component.ts<\/strong> file. I want to hard set my location to Sweden because why not \ud83d\ude42<\/p>\n\n\n\n options: google.maps.MapOptions = {\n center: {lat: 64.48113363780652, lng: 16.33826752001327}, \n zoom: 4\n };\n<\/pre><\/div>\n\n\nTips on finding latitude and longitude<\/strong> for your Angular App<\/strong>: Go to Google Maps<\/a> and then find your location by searching on your location, then when the map is viewing your place you want to find the coordinates for, right click on the map and click on the top value which is numbers as seen in the image below. I just right clicked on the Empire State Building and there you have the coordinates. <\/p>\n\n\n\n![\"\"](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/01\/image-9.png\")
<\/figure>\n\n\n\nNow let us ddit tutorial-google-maps.component.html<\/strong> so the map take use of the property<\/p>\n\n\n\n<div *ngIf="apiLoaded | async">\n <google-map [options]="options"><\/google-map>\n<\/div>\n<\/pre><\/div>\n\n\nLet’s take a look at our map.<\/p>\n\n\n\n![\"\"](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/01\/image-5.png\")
Showing the map from our Angular 11 project<\/figcaption><\/figure>\n\n\n\nNow we are in Sweden, the country where I am from! Great. Next challenge is to take it a step further and set the map to our own location. <\/p>\n\n\n\n
Set the Google Maps location to current position<\/h2>\n\n\n\n
Create a new folder under your app folder called Services. Then run the command for creating a new service:<\/p>\n\n\n
\nng generate service services\/location\n<\/pre><\/div>\n\n\nThen add a new function getPosition in the LocationService class in the file location.service.ts<\/strong><\/p>\n\n\n\n getPosition(): Promise<any> {\n return new Promise((resolve, reject) => {\n navigator.geolocation.getCurrentPosition(resp => {\n resolve({ lng: resp.coords.longitude, lat: resp.coords.latitude });\n },\n err => {\n reject(err);\n });\n });\n }\n<\/pre><\/div>\n\n\nThen modify your tutorial-google-maps.component.ts<\/strong> file to take use of the service and show us the location of where we are. I am increasing the zoom little bit here also. This is now the whole file of tutorial-google-maps.component.ts<\/strong>. So what we do here in the constructor is that we wait for the value from the Promise in our Service function which returns our current location, and then we take those values and set the longitude and the latitude which we use for our map. <\/p>\n\n\n\nimport { Component, OnInit } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\nimport { of } from 'rxjs\/internal\/observable\/of';\nimport { map, catchError } from 'rxjs\/operators';\nimport { LocationService } from '..\/services\/location.service';\n@Component({\n selector: 'app-tutorial-google-maps',\n templateUrl: '.\/tutorial-google-maps.component.html',\n styleUrls: ['.\/tutorial-google-maps.component.css']\n})\nexport class TutorialGoogleMapsComponent implements OnInit {\n apiLoaded: Observable<boolean>;\n options: google.maps.MapOptions = {\n center: { lat: 64.48113363780652, lng: 16.33826752001327 },\n zoom: 5\n };\n constructor(httpClient: HttpClient,\n locationService: LocationService) {\n \/\/ Use our locationservice!\n locationService.getPosition().then(pos => {\n this.options.center.lat = pos.lat;\n this.options.center.lng = pos.lng;\n });\n\n this.apiLoaded = httpClient.jsonp('https:\/\/maps.googleapis.com\/maps\/api\/js?key=[Your API Key here]', 'callback')\n .pipe(\n map(() => true),\n catchError(() => of(false)),\n );\n }\n\n ngOnInit(): void {\n }\n\n}\n\n<\/pre><\/div>\n\n\nRun your application and see that you must now accept the website trying to get your location.<\/p>\n\n\n\n![\"\"](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/01\/image-6-1024x756.png\")
Before comfirming the website can use my location<\/figcaption><\/figure>\n\n\n\n![\"\"](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/01\/image-7.png\")
After approved website can use my location<\/figcaption><\/figure>\n\n\n\nAnd as you see in the image two, I can now see that it finds my location correctly since am in Stockholm. Now you can increase zoom level to like 14 or so and see the exact street and house like you would in Google Maps (maps.google.com) normally but I don’t wanna share my location to the world in this tutorial therefore I feel zoom value 5 is appropriate. <\/p>\n\n\n\n
Add a marker to our current location to the map<\/h3>\n\n\n\n
A thing you might feel is missing is a marker of some kind. Right now it is just a map without much on it but to add markers is not a difficult task. Put a map-marker element inside the google-map element with a for loop of a array of objects of our markers and their location like this in the file tutorial-google-maps.component.html:<\/p>\n\n\n
\n<div *ngIf="apiLoaded | async">\n <google-map [options]="options" (mapClick)="addMarker($event)">\n <map-marker *ngFor="let markerPosition of markerPositions" [position]="markerPosition"\n [options]="markerOptions"><\/map-marker>\n <\/google-map>\n<\/div>\n<\/pre><\/div>\n\n\nThen we change up our tutorial-google-maps.component.ts file:<\/p>\n\n\n
\nimport { Component, OnInit } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\nimport { of } from 'rxjs\/internal\/observable\/of';\nimport { map, catchError } from 'rxjs\/operators';\nimport { LocationService } from '..\/services\/location.service';\n@Component({\n selector: 'app-tutorial-google-maps',\n templateUrl: '.\/tutorial-google-maps.component.html',\n styleUrls: ['.\/tutorial-google-maps.component.css']\n})\nexport class TutorialGoogleMapsComponent implements OnInit {\n apiLoaded: Observable<boolean>;\n\n options: google.maps.MapOptions = {\n center: { lat: 64.48113363780652, lng: 16.33826752001327 },\n zoom: 6\n };\n markerOptions: google.maps.MarkerOptions = { draggable: false };\n markerPositions: google.maps.LatLngLiteral[] = [];\n\n addMarker(latLng) {\n this.markerPositions.push(latLng);\n }\n constructor(httpClient: HttpClient,\n locationService: LocationService) {\n locationService.getPosition().then(pos => {\n this.options.center.lat = pos.lat;\n this.options.center.lng = pos.lng;\n let latLng =\n {\n lat: pos.lat,\n lng: pos.lng\n }\n this.addMarker(latLng);\n });\n\n this.apiLoaded = httpClient.jsonp('https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyCvly', 'callback')\n .pipe(\n map(() => true),\n catchError(() => of(false)),\n );\n }\n\n ngOnInit(): void {\n }\n\n}\n\n<\/pre><\/div>\n\n\nResult<\/h3>\n\n\n\n
We now see our current location pinned down in our app.<\/p>\n\n\n\n![\"\"](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/01\/image-8.png\")
<\/figure>\n\n\n\nYou can play around with more things at the github documentation here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"In case you are curious how to add Google Maps to your Angular app you can follow my little tutorial here. We add a new Angular project from scratch. I will use Angular 11, but of course you can probably use another version as well. Since I had Angular 10 previously on my computer, I … <\/p>\n