Integrating Google Maps API w/ Angular 7+

A bare-bones implementation

3 min readFeb 7, 2019

This tutorial is based on a good article by Balram Chavan, with some additional details!

Step 1: Request an API key from Google

Detailed steps at https://developers.google.com/maps/documentation/javascript/get-api-key. Note that you’ll need to enter payment information, but there are plenty of ways to use the API for free! For this tutorial, I won’t get into the specifics of authentication and API key restrictions.

Step 2: Create a new Angular project

If you have the Angular CLI and the pre-requisites for developing Angular apps installed, simply run

ng new ng-gmaps

in a command prompt to create a new project. In this case, my project will be called ng-gmaps. The Angular CLI is a very powerful tool that can streamline updates between Angular versions, create new projects, and easily add components and services to your project (among many other functions).

Step 3: Install Google Maps types for typescript support

In your project directory, run

npm install --save @types/googlemaps

This package imports the TypeScript type definitions for the Google Maps Javascript API and allows for strong types and intellisense in your IDE (if supported).

Step 4: Link to the Google Maps JavaScript file

Open the index.html file and add in the following script tag within the <body></body> section. Replace API-KEY with the API key you procured in step 1. I added it below the <app-root></app-root> tag, not sure if the order matters.

<script src="http://maps.googleapis.com/maps/api/js?key=API-KEY"></script>

Step 5: Add the HTML element to house the map

For simplicity, you can add this to your AppComponent, but this will also work in sub components. In app.component.html, add

<div #map style="width:100%;height:400px"></div>

Step 6: Import the Google Map types into component

In the component file where you placed the map placeholder element (in this case, app.component.ts), we need to import the Google Map TypeScript definitions. At the top of app.component.ts, I’ll add

import {} from 'googlemaps';

At this point, if you run your application using

ng serve

you’ll probably see an error like

@types/googlemaps/index.d.ts is not a module

Oh no! Red squigglies! Don’t fret, just create a file called index.d.ts directly within your src directory and add the following line

declare module 'googlemaps';

If you’re still seeing the error, try restarting the application using ng serve.

Step 7: Initialize the map

Still working within the component file, let’s initialize the map within the OnInit lifecycle hook. Add two variables within your component

@ViewChild('map') mapElement: any;
map: google.maps.Map;

Note that the variable name in the ViewChild annotation needs to match whatever # variable declaration you put in your HTML (in this example, we called it ‘map’). You will also need to import ViewChild

import { ViewChild } from '@angular/core';

ViewChild creates a reference to the HTML element containing the map. Make sure your component implements the OnInit interface and add the following method

ngOnInit(): void {
   const mapProperties = {
        center: new google.maps.LatLng(35.2271, -80.8431),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   this.map = new google.maps.Map(this.mapElement.nativeElement,    mapProperties);
}

This map will center on Charlotte, NC, and should come with some built-in zoom and navigation controls.

Step 8: Run the application

Start the application! Run command

ng serve

Do you see a map? I hope this was helpful!