Google maps are one of the most widely used maps on the internet. They are very detailed and extensible. In this article I will show you how to integrate google maps into your angular application. There are many ways google maps can be integrated into Angular application but the most common ways are:

1 — Use AGM

2 — Manually add Google Maps.

In this article I will show you the second method. You can customise this way to load other third party javascript files.

Before we begin you will need to obtain google maps api key and an angular application. You can create angular application using angular cli. For this article I will be writing code on stackblitz.com.

Here is the starter project in stackblitz.com which you can use to follow along.

The starter project consist of two components AppComponent and ChildComponent . app.component.html simply loads the ChildComponent

Loading Google Maps Javascript

We need to figure out how to load google maps javascript into our angular application. If angular was not used we would simply add reference to javascript code hosted by google in your html and specify the callback to be executed once the referenced javascript file is loaded.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"

async defer></script>

We can do the same thing in our angular application by modifying index.html but that will cause our google maps to be loaded all over the application, instead we want them to be only added when a certain component is activated. For this we can use javascript to dynamically load google maps javascript file. Let us write a method named loadScript inside child.component.ts which accepts a string pointing towards google server hosting the google maps javascript file.

In our loadScript method we are creating a Promise, inside the promise we create a a new script tag setting it async and defer to true , assigning the onload and onerror to promise’s resolve and reject . Finally we assign the url to script.src and then add the newly created script element to the DOM.

This script should work fine but it has a small problem. It directly accesses the DOM which is not ideal when creating a Server Side Rendered Angular application. We can do better. Instead of directly accessing the DOM we can use Angular’s Document and Renderer2 to do the DOM manipulation for us.

You need to add following imports to your child.component.ts .

import { Component, Inject, Renderer2, OnInit } from '@angular/core'; import { DOCUMENT } from '@angular/common';

and change your constructor to

constructor(

@Inject(DOCUMENT) private document: Document, private renderer2: Renderer2,) {}

after that you will need to update the loadScript method as:

Note that we are calling using Renderer2 instead of document.

Here is how your child.component.ts should look like:

Now we need to call loadScript with string containing path to google’s map with api key. For now we can use the following string.

https://maps.googleapis.com/maps/api/js?key=AIzaSyBAyMH-A99yD5fHQPz7uzqk8glNJYGEqus

Note: You can find API key from here. The path to google maps javascript file is listed here

We can call loadScript method from multiple places, we can call it either from constructor , ngOnInit or ngAfterViewInit depending upon how early to late you want the maps to be loaded. For this article I will call it inside ngOnInit .

Now our child.component.ts is loading the google maps javascript file. We can verify this: Open the developer tool, under the network tab you should see a network request to google maps javascript file.

To actually display the map we need to write some further code. Let’s write it now.

— Update child.component.html

Add a div with ID of map . This div will be used as a container for google map.

<div id="map"></div>

— Update child.component.scss

Add an ID selector called map and set it’s height to 200px .It’s important that you give it a height otherwise map won’t be displayed and the value 200px is arbitrary.

#map { height: 200px; }

Now we have all necessary setup to display the map. Our loadScript method is download and executing javascript from the google server. Before we

We can verify this by modifying out ngOnInit method and adding console.log .You will notice that now typescript is complaining that can not find google it’s is because google maps are loaded at runtime in browser and typescript does not have any information related google maps. We can fix this by adding following line below our imports:

declare const google;

The line tells typescript not to worry about google as it will be available during run time.

ngOnInit() { const url = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBAyMH-A99yD5fHQPz7uzqk8glNJYGEqus';

this.loadScript(url).then(() => console.log(google.maps.Map));

}

console.log(google.maps.Map)

According to console.log output google maps javascript is loaded into global namespace.

Initialising Google Map

Let’s write a method named initMap to initialise map. This method create’s a new instance of Map object around the element passed in as argument. We are passing a div with id of map to it.

private initMap() {

const map = new google.maps.Map(document.getElementById('map'), {zoom: 1, center: {lat: 0, lng: 0});

}

Now the next step is to call this method. This method should be called once the google maps javascript code is executed by browser, we can be sure that google maps javascript has been executed once the promised returned by loadScript is resolved. Let’s modify our ngOnInit and implement this logic.

Our ngOnInit should look this now:

ngOnInit() {

const url = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBAyMH-A99yD5fHQPz7uzqk8glNJYGEqus';

this.loadScript(url).then(() => this.initMap());

}

Now you should be able to see the maps. Here is final version of the application. In my future articles I will show how to add markers to map, convert our current implementation into more angularish way and other cool stuff . Stay tuned!