Introduction: Utilizing Google Maps API with Angular-CLI - A Beginner's Guide

Question

Introduction: Utilizing Google Maps API with Angular-CLI - A Beginner's Guide

After just starting with ng2, I decided to create a project using angular-cli. However, I soon realized that I needed some third-party modules such as Google Maps API, Lodash, and JQuery. Although I have a basic understanding of Typescript, I was unsure how to incorporate these modules into an Angular2 app without relying on existing ng2 modules or components built on top of them.

In the past, when working with JavaScript, I would simply include the JS file and reference the API documentation to know which methods to use. With Angular2, I wasn't sure what steps to take to achieve the same result.

My research led me to believe that I should first install the necessary Typescript files. For example, for Google Maps, I used

npm install --save @types/google-maps

. Now, my question is whether I need to import this module into my Angular app by including it in app.module.ts, in the imports array, or if it is globally available.

One source suggested installing it with npm and then adding a reference to the library in the scripts array of my angular-cli.json like this:

"scripts": ['./node_modules/googlemaps/googemaps.min.js'],

Which method is best for installing the Google Maps API? Considering that the rest of my Angular app will be written in Typescript, I assumed Typescript might be the way to go.

Now, in my app.component.ts, I want to create a simple map using the Typescript version of Google Maps that I installed. How can I accomplish this? The Google Maps API recommends creating a new instance of the map like this:

var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          scrollwheel: false,
          zoom: 8
        });

But how do I do this using the Typescript version of Google Maps that I just installed?

Would the Typescript version of Google Maps have all the same methods as the original API? Are there documentation sites for typescripts of popular JS libraries that I can refer to?

google-maps angular typescript angular-cli

Answer 1

Answer №1

The project agm recommended by @Steve G. serves as a good starting point, but in some cases (such as managing your own request policy), you might prefer creating your own typed wrapper. Here's how I achieved this using Angular Cli:

Step One:

npm i --save @types/googlemaps

Next, add the types to your tsconfig.app.json:

"types": ["googlemaps"]

Finally, write your TypeScript code:

// No imports here

// Replace this with any value without an ID_KEY
const getScriptSrc = (callbackName) => {
  return `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=${callbackName}`;
}

export class GMapService {

  private map: google.maps.Map;
  private geocoder: google.maps.Geocoder;
  private scriptLoadingPromise: Promise<void>;

  constructor() {
        // Loading script
        this.loadScriptLoadingPromise();
        // Load other components
        this.onReady().then(() => {
          this.geocoder = new google.maps.Geocoder();
        });
  }

  onReady(): Promise<void> {
    return this.scriptLoadingPromise;
  }

  initMap(mapHtmlElement: HTMLElement, options: google.maps.MapOptions): Promise<google.maps.Map> {
    return this.onReady().then(() => {
      return this.map = new google.maps.Map(mapHtmlElement, options);
    });
  }

  private loadScriptLoadingPromise() {
    const script = window.document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.defer = true;
    const callbackName: string = 'UNIQUE_NAME_HERE';
    script.src = getScriptSrc(callbackName);
    this.scriptLoadingPromise = new Promise<void>((resolve: Function, reject: Function) => {
      (window as any)[callbackName] = () => { resolve(); };

      script.onerror = (error: Event) => { reject(error); };
    });
    window.document.body.appendChild(script);
  }

  /** Example of wrapping API calls in promises */
  geocode(address: string | google.maps.GeocoderRequest): Promise<google.maps.GeocoderResult[]> {
    return this.onReady().then(() => {
      this.geocoder.geocode(typeof address === "google.maps.GeocoderRequest" ? address : {address: address},
          (results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => {
            if(status === google.maps.GeocoderStatus.OK) {
              return results;
            } else {
              throw new Error(status.toString());
            }
      });
    });
  });

}

So your map component will appear as follows:

@Component({
  selector: 'app-gmap-wrapper',
  template: '<div #map style="width:400px; height:300px">loading...</div>'
})
export class GMapWrapperComponent implements OnInit {
    @ViewChild('map') mapRef: ElementRef;

    constructor(private gmapService: GMapService) { }

    ngOnInit() {
      this.gmapService.initMap(this.mapRef.nativeElement, {
        center: {lat: 1234.1234, lng: 1234.1234},
        scrollwheel: true,
        zoom: 8
      });
    }
}

This code can be improved by removing the namespace google.maps from all types. Any suggestions?

Answer 2

The project agm recommended by @Steve G. serves as a good starting point, but in some cases (such as managing your own request policy), you might prefer creating your own typed wrapper. Here's how I achieved this using Angular Cli:

Step One:

npm i --save @types/googlemaps

Next, add the types to your tsconfig.app.json:

"types": ["googlemaps"]

Finally, write your TypeScript code:

// No imports here

// Replace this with any value without an ID_KEY
const getScriptSrc = (callbackName) => {
  return `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=${callbackName}`;
}

export class GMapService {

  private map: google.maps.Map;
  private geocoder: google.maps.Geocoder;
  private scriptLoadingPromise: Promise<void>;

  constructor() {
        // Loading script
        this.loadScriptLoadingPromise();
        // Load other components
        this.onReady().then(() => {
          this.geocoder = new google.maps.Geocoder();
        });
  }

  onReady(): Promise<void> {
    return this.scriptLoadingPromise;
  }

  initMap(mapHtmlElement: HTMLElement, options: google.maps.MapOptions): Promise<google.maps.Map> {
    return this.onReady().then(() => {
      return this.map = new google.maps.Map(mapHtmlElement, options);
    });
  }

  private loadScriptLoadingPromise() {
    const script = window.document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.defer = true;
    const callbackName: string = 'UNIQUE_NAME_HERE';
    script.src = getScriptSrc(callbackName);
    this.scriptLoadingPromise = new Promise<void>((resolve: Function, reject: Function) => {
      (window as any)[callbackName] = () => { resolve(); };

      script.onerror = (error: Event) => { reject(error); };
    });
    window.document.body.appendChild(script);
  }

  /** Example of wrapping API calls in promises */
  geocode(address: string | google.maps.GeocoderRequest): Promise<google.maps.GeocoderResult[]> {
    return this.onReady().then(() => {
      this.geocoder.geocode(typeof address === "google.maps.GeocoderRequest" ? address : {address: address},
          (results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => {
            if(status === google.maps.GeocoderStatus.OK) {
              return results;
            } else {
              throw new Error(status.toString());
            }
      });
    });
  });

}

So your map component will appear as follows:

@Component({
  selector: 'app-gmap-wrapper',
  template: '<div #map style="width:400px; height:300px">loading...</div>'
})
export class GMapWrapperComponent implements OnInit {
    @ViewChild('map') mapRef: ElementRef;

    constructor(private gmapService: GMapService) { }

    ngOnInit() {
      this.gmapService.initMap(this.mapRef.nativeElement, {
        center: {lat: 1234.1234, lng: 1234.1234},
        scrollwheel: true,
        zoom: 8
      });
    }
}

This code can be improved by removing the namespace google.maps from all types. Any suggestions?

Answer 3

Answer №2

When I encountered issues with AGM in components and nu-maps, I decided to switch to using plain Google API JavaScript which I found to be much better:

If you're having similar troubles, I recommend giving it a try: https://cloud.google.com/maps-platform/?hl=de

Simpler to use
Well-documented
Not reliant on individuals who don't merge pull requests
It just works!

Answer 4

When I encountered issues with AGM in components and nu-maps, I decided to switch to using plain Google API JavaScript which I found to be much better:

If you're having similar troubles, I recommend giving it a try: https://cloud.google.com/maps-platform/?hl=de

Simpler to use
Well-documented
Not reliant on individuals who don't merge pull requests
It just works!

Introduction: Utilizing Google Maps API with Angular-CLI - A Beginner's Guide

Answer №1

Answer №2

Similar questions

TypeScript has encountered an issue where a specific type A cannot be assigned to another type A, even though

Adjusting the dimensions of the cropper for optimal image cropping

Ways to customize the placeholder for Material input fields in Angular 5

Creating a new model in TypeScript may encounter a declaration issue with getting

Maximizing the power of Webpack alongside Google Maps API

Get the latest Angular updates by running the command: "ng update @angular/cli @angular/core --allow-dirty --

Encountering an issue with Jest when using jest.spyOn() and mockReturnValueOnce causing an error

Lack of Intellisense in Sveltekit for the generated $types module on WebStorm

Issue with Angular DevExtreme error popup

Issue with Bootstrap 4 column width when using Angular 2 *ngFor

I am currently working on establishing a connection between Angular and MongoDB

Finding items in the database using their identification numbers

Combining two objects/interfaces in a deep merging process, where they do not intersect, can result in a final output that does not

simulate express-jwt middleware functions for secure routes

Cypress - AG-Grid table: Typing command causing focus loss in Cell

What is the best way to define an event binding statement in the Angular code rather than within the template?

Incorporating New Relic into an Angular Universal application running on Node.js

What is the best way to change between different Angular 2 material tabs using typescript?

What is the best way to pass the username and token data from a child component to its parent component

Injecting constructor for Angular standalone component and service