Integrate Angular Google Map and show moving object over given path on the map

I

n this article, we will see how we'll integrate the angular-google-map module in our angular 9 app. We will create an app in angular 9 app and will integrate the AGM module and will show a marker of our given location using angular-google-map. Let's read this article till end and follow the steps given below.

Before starting this, you need to install the Angular CLI in your machine, so if you haven't installed the Angular CLI then click here and install the angular CLI.

Let's get started:

Create an Angular 9 app:

In this step, we'll create an angular 9 app and later we will integrate the @agm/core module in our app and will write the code to show the location marker.
First we'll create an app using ng new utility. So run the below command to to create a demo angular app:

ng new agm-demo

Integrate Angular Google Map (@agm/core) module and show location marker in Angular 9 application

After the successful command, you can see there would be a directory created with name ang-demo.
run the below command to start your app:

cd  agm-demo

then run:

npm install

then run:

npm start

Integrate Angular Google Map (@agm/core) module and show location marker in Angular 9 application

Now open the browser and hit URL localhost:4200 and make sure your app is working as:

Integrate Angular Google Map (@agm/core) module and show location marker in Angular 9 application

Now your angular app is working and you need to integrate the angular google map in this app.

Integrate the Angular Google Map: @agm/core

Now install the agm module (@agm/core) by using below command:

npm install @agm/core --save

After the above command the @agm/core module would've been installed, you can check this module in your package.json file.
Now let's open your app in any IDE like VS Code. Now open file "src/app/app.module.ts" and import the below code:

                      import { AgmCoreModule } from '@agm/core';
                      import { AgmDirectionModule } from 'agm-direction';
                      

after importing the above lines (AgmCoreModule & AgmDirectionModule), you need to add these module in imports[] as:

                      imports: [
                      BrowserModule,
                      AgmCoreModule.forRoot({apiKey: 'YOUR_GOOGLE_API_KEY'}),
                      AgmDirectionModule
                      ]
                      <pre><code class="language-javascript"><textarea readonly>
                      

you need to add your google api key, if you don't have your google api key the you can generate the google api key here.
See the complete code as:
app.module.ts:

                        import { BrowserModule } from '@angular/platform-browser';
                        import { NgModule } from '@angular/core';
                        import { AppComponent } from './app.component';
                        
                        import { AgmCoreModule } from '@agm/core';
                        import { AgmDirectionModule } from 'agm-direction';
                        
                        @NgModule({
                          declarations: [
                            AppComponent
                          ],
                          imports: [
                            BrowserModule,
                            AgmCoreModule.forRoot({apiKey: 'YOUR_GOOGLE_API_KEY'}),
                            AgmDirectionModule
                          ],
                          providers: [],
                          bootstrap: [AppComponent]
                        })
                        export class AppModule { }
                      

Now open the file "src/app/app.component.html" and write the below codes:

                                <agm-map 
                                [latitude]="lat"
                                [longitude]="lng"
                                [zoom]="zoom" (mapReady)="onMapReady($event)">
                              </agm-map>
                              
                                <div class="controls">
                                  <button (click)="play()">Play</button>
                                  <button (click)="pause()">Pause</button>
                                  <button (click)="reset()">Reset</button>
                                  <button (click)="next()">Next</button>
                                  <button (click)="prev()">Previous</button>
                                  <button (click)="fast()">Fast</button>
                                  <span id="speed">Speed: {{ speedMultiplier }}x</span>
                                  <button (click)="slow()">Slow</button>
                                </div>
                      

Here you are done with your html, Now it's time to write the code for component. So open the file "src/app/app.component.ts" and write the below codes:

                        import { Component } from '@angular/core';
                        import { TravelMarker, TravelMarkerOptions, TravelData, TravelEvents, EventType } from 'travel-marker';
                        declare var google: any;
                        var locationData =[[51.51324,-0.09909000000000001],[51.5133,-0.09908],[51.5133,-0.09908],[51.513290000000005,-0.09895000000000001],[51.513290000000005,-0.09885000000000001],[51.513290000000005,-0.09871],[51.513290000000005,-0.09861],[51.513290000000005,-0.0985],[51.513290000000005,-0.09838000000000001],[51.51328,-0.09826000000000001],[51.51328,-0.09826000000000001],[51.5133,-0.09816000000000001],[51.51332000000001,-0.0981],[51.51334000000001,-0.09806000000000001],[51.51339,-0.098],[51.513400000000004,-0.09791000000000001],[51.51342,-0.09781000000000001],[51.51343000000001,-0.09767],[51.513450000000006,-0.09756000000000001],[51.51346,-0.09748000000000001],[51.51346,-0.09741000000000001],[51.513470000000005,-0.09732],[51.51344,-0.09719000000000001],[51.51342,-0.09705000000000001],[51.51341000000001,-0.09694000000000001],[51.51339,-0.09681000000000001],[51.513360000000006,-0.09648000000000001],[51.51335,-0.09634000000000001],[51.51335,-0.09634000000000001],[51.51342,-0.09634000000000001],[51.513470000000005,-0.09634000000000001],[51.51350000000001,-0.09633000000000001],[51.513540000000006,-0.09634000000000001],[51.513580000000005,-0.09634000000000001],[51.51364,-0.09636],[51.51368,-0.09637000000000001],[51.513720000000006,-0.09638000000000001],[51.51375,-0.09639],[51.5138,-0.09642],[51.513830000000006,-0.09643],[51.513850000000005,-0.09644000000000001],[51.513870000000004,-0.09646],[51.51391,-0.09649],[51.513960000000004,-0.09652000000000001],[51.51399000000001,-0.09656],[51.514030000000005,-0.09659000000000001],[51.514120000000005,-0.09671],[51.514160000000004,-0.09675],[51.514210000000006,-0.09680000000000001],[51.51424,-0.09685],[51.514250000000004,-0.09688000000000001],[51.51428000000001,-0.09690000000000001],[51.514300000000006,-0.09692],[51.51433,-0.09693],[51.51437000000001,-0.09694000000000001],[51.514410000000005,-0.09695000000000001],[51.51447,-0.09694000000000001],[51.514520000000005,-0.09694000000000001],[51.51462,-0.09693],[51.51462,-0.09693],[51.514610000000005,-0.09681000000000001],[51.51456,-0.09655000000000001],[51.514540000000004,-0.09644000000000001],[51.514480000000006,-0.09621],[51.514430000000004,-0.09595000000000001],[51.514410000000005,-0.09586000000000001],[51.51435000000001,-0.09552000000000001],[51.514320000000005,-0.09534000000000001],[51.51429,-0.09508000000000001],[51.51422,-0.09473000000000001],[51.5142,-0.09461000000000001],[51.51418,-0.09445],[51.514140000000005,-0.09419000000000001],[51.514140000000005,-0.09419000000000001],[51.51437000000001,-0.09411000000000001],[51.51455000000001,-0.09404000000000001],[51.51456,-0.09404000000000001],[51.51458,-0.09402],[51.514590000000005,-0.09401000000000001],[51.514630000000004,-0.09396],[51.514660000000006,-0.09394000000000001],[51.51476,-0.09382000000000001],[51.51485,-0.09374],[51.51489,-0.0937],[51.51494,-0.09365000000000001],[51.51500000000001,-0.09361000000000001],[51.51507,-0.09357000000000001],[51.515100000000004,-0.09354000000000001],[51.51512,-0.09353],[51.515170000000005,-0.09350000000000001],[51.51527,-0.09345],[51.51532,-0.09343000000000001],[51.515370000000004,-0.09340000000000001],[51.51543,-0.09336000000000001],[51.51543,-0.09336000000000001],[51.51538000000001,-0.09323000000000001],[51.5153,-0.09307000000000001],[51.51527,-0.09301000000000001],[51.515260000000005,-0.09296],[51.515240000000006,-0.09293000000000001],[51.51523,-0.09288],[51.51520000000001,-0.09273],[51.51518,-0.0926],[51.515150000000006,-0.09245],[51.51511000000001,-0.09213],[51.51503,-0.09135],[51.514990000000004,-0.09107000000000001],[51.51494,-0.09061000000000001],[51.51491000000001,-0.09035000000000001],[51.51491000000001,-0.09035000000000001],[51.51489,-0.09018000000000001],[51.514810000000004,-0.08967000000000001],[51.514790000000005,-0.08956],[51.514770000000006,-0.08943000000000001],[51.51475000000001,-0.08932000000000001],[51.51475000000001,-0.08926],[51.51473000000001,-0.08912],[51.514720000000004,-0.08901],[51.514700000000005,-0.08884],[51.514680000000006,-0.08856000000000001],[51.51467,-0.08845],[51.51467,-0.0884],[51.51465,-0.08808],[51.51464000000001,-0.08783],[51.514630000000004,-0.08779],[51.514630000000004,-0.08779],[51.51447,-0.08767000000000001],[51.51433,-0.08758],[51.514140000000005,-0.08743000000000001],[51.513920000000006,-0.08728000000000001],[51.513920000000006,-0.08728000000000001],[51.513960000000004,-0.08704],[51.514010000000006,-0.08681000000000001],[51.514030000000005,-0.08672],[51.514050000000005,-0.08665],[51.514070000000004,-0.08657000000000001],[51.514100000000006,-0.08646000000000001],[51.51411,-0.0864],[51.514120000000005,-0.08633],[51.514120000000005,-0.08620000000000001],[51.514140000000005,-0.08593],[51.514160000000004,-0.08578000000000001],[51.514160000000004,-0.08567000000000001],[51.514190000000006,-0.08545000000000001],[51.5142,-0.08537],[51.51424,-0.08509000000000001],[51.51429,-0.08482],[51.51431,-0.08469],[51.51435000000001,-0.08441000000000001],[51.5144,-0.08415],[51.51442,-0.08402000000000001],[51.51442,-0.08396],[51.514430000000004,-0.08391000000000001],[51.514430000000004,-0.08386],[51.514430000000004,-0.08380000000000001],[51.51442,-0.08374000000000001],[51.5144,-0.08366000000000001],[51.5144,-0.08366000000000001],[51.51446000000001,-0.08358],[51.51453000000001,-0.0835],[51.51464000000001,-0.08336],[51.51473000000001,-0.08322],[51.51489,-0.083],[51.51493000000001,-0.08295000000000001],[51.51493000000001,-0.08295000000000001],[51.514880000000005,-0.08285000000000001],[51.5148,-0.08264],[51.51478,-0.08261],[51.514770000000006,-0.08257],[51.514770000000006,-0.08256000000000001],[51.51476,-0.08252000000000001],[51.51475000000001,-0.08248000000000001],[51.51474,-0.08237000000000001],[51.514720000000004,-0.08226000000000001],[51.51469,-0.08214],[51.51467,-0.08207],[51.514660000000006,-0.08204],[51.51464000000001,-0.08201000000000001],[51.51462,-0.08198000000000001],[51.514590000000005,-0.08195000000000001],[51.51455000000001,-0.08191000000000001],[51.51451,-0.08188000000000001],[51.51451,-0.08188000000000001],[51.514520000000005,-0.08135],[51.514520000000005,-0.08132],[51.51451,-0.08129],[51.514500000000005,-0.08125],[51.51449,-0.08118],[51.514430000000004,-0.08099],[51.514430000000004,-0.08099],[51.51455000000001,-0.0809],[51.5146,-0.08088000000000001],[51.51464000000001,-0.08085],[51.51475000000001,-0.08080000000000001],[51.51478,-0.08078]]
                        
                        @Component({
                          selector: 'app-root',
                          templateUrl: './app.component.html',
                          styleUrls: ['./app.component.css']
                        })
                    
                        export class AppComponent {
                          zoom: number = 15;
                          // initial center position for the map
                          lat: number = 51.512802;
                          lng: number = -0.091324;
                          map: any;
                          line: any;
                          directionsService: any;
                          marker: TravelMarker = null;
                          // speedMultiplier to control animation speed
                          speedMultiplier = 1;
                          onMapReady(map: any) {
                            console.log(map);
                            this.map = map;
                            this.mockDirections();
                          }
                        
                        
                          // mock directions api
                          mockDirections() {
                            const locationArray = locationData.map(l => new google.maps.LatLng(l[0], l[1]));
                            this.line = new google.maps.Polyline({
                              strokeOpacity: 0.5,
                              path: [],
                              map: this.map
                            });
                            locationArray.forEach(l => this.line.getPath().push(l));
                          
                            const start = new google.maps.LatLng(51.513237, -0.099102);
                            const end = new google.maps.LatLng(51.514786, -0.080799);
                        
                            const startMarker = new google.maps.Marker({position: start, map: this.map, label: 'A'});
                            const endMarker = new google.maps.Marker({position: end, map: this.map, label: 'B'});
                            this.initRoute();
                          }
                        
                          // initialize travel marker
                          initRoute() {
                            const route = this.line.getPath().getArray();
                        
                            // options
                            const options: TravelMarkerOptions = {
                              map: this.map,  // map object
                              speed: 50,  // default 10 , animation speed
                              interval: 10, // default 10, marker refresh time
                              speedMultiplier: this.speedMultiplier,
                              markerOptions: { 
                                title: 'Travel Marker',
                                animation: google.maps.Animation.DROP,
                                icon: {
                                  url: 'https://i.imgur.com/eTYW75M.png',
                                  // This marker is 20 pixels wide by 32 pixels high.
                                  animation: google.maps.Animation.DROP,
                                  // size: new google.maps.Size(256, 256),
                                  scaledSize: new google.maps.Size(128, 128),
                                  // The origin for this image is (0, 0).
                                  origin: new google.maps.Point(0, 0),
                                  // The anchor for this image is the base of the flagpole at (0, 32).
                                  anchor: new google.maps.Point(53, 110)
                                }
                              },
                            };
                          
                            // define marker
                            this.marker = new TravelMarker(options);
                            
                            // add locations from direction service 
                            this.marker.addLocation(route);
                              
                            setTimeout(() => this.play(), 2000);
                          }
                        
                          // play animation
                          play() {
                            this.marker.play();
                          }
                        
                          // pause animation
                          pause() {
                            this.marker.pause();
                          }
                        
                          // reset animation
                          reset() {
                            this.marker.reset();
                          }
                        
                          // jump to next location
                          next() {
                            this.marker.next();
                          }
                        
                          // jump to previous location
                          prev() {
                            this.marker.prev();
                          }
                        
                          // fast forward
                          fast() {
                            this.speedMultiplier*=2;
                            this.marker.setSpeedMultiplier(this.speedMultiplier);
                          }
                        
                          // slow motion
                          slow() {
                            this.speedMultiplier/=2;
                            this.marker.setSpeedMultiplier(this.speedMultiplier)
                          }
                        
                          initEvents() {
                            this.marker.event.onEvent((event: EventType, data: TravelData) => {
                              console.log(event, data);
                            });
                          }    
                        }
                      

Here you go, You are done with the implementations, its time to run the app and see the result.
Run the below command:

npm start

Now open your browser and hit the below URL:

localhost:4200

and see the result as:

Integrate agm/core module and show moving direction of given path over the map in Angular 9 application

Now your angular app is working and you need to integrate the angular google map in this app. Enjoy your angular map.

---

Conclusion:

In this app, we learned about the agm module and also learned implementation of @agm/core (Angular Google Map). And we integrated the AgmDirectionModule module and shown the dynamic direction of given path with moving object.
Also we learned, how we can install the Angular CLI.