Integrating Google Maps in Angular 6

Balram Chavan
Dec 26, 2017 · 3 min read

Updated on 26 July 2018 — Angular version 6

Updated on 11 June 2018

Integrating OpenStreetMap (an open source map solution) with Angular 6.

Updated on 8 May 2018

Showing custom marker images on map. Updated GitHub repository and demo.

Updated on 6 April 2018

Handling marker’s click event handler within component’s function. Updated GitHub repository and demo.

  • Simple click handler
  • Accessing selected marker’s properties

Updated on 11 March 2018:

Adding multiple Markers on Google maps upon button click. Demo and GitHub repository updated.

Update:

You may have seen many websites, mobile applications with GIS Map integrations. There are many map solutions but Google Maps is one of the best nevertheless for commercial use, you must buy subscription. In this story, we shall focus on only Google Maps for free usage.

If you are wondering how hard it is to build Angular 5 application and integrate Google Maps in it then answer is very simple.

Checkout the live demo before we proceed.

Step 1: Creating new project

Create a new project using command ng new gmaps-ng5

Step 2: Install Google Maps types for typescript support.

Run command npm install --save @types/googlemaps

Step 3: Link Google Maps JavaScript CDN inside index.html

<script src="http://maps.googleapis.com/maps/api/js"></script>

NOTE: Make sure you put your Google Map API Key here. You can get one from `https://developers.google.com/maps/documentation/javascript/get-api-key`. If not, after free usage, Google Map will start showing watermark.

With above steps, you are all set to start working with Google Maps (GMap).

Step 4: Next, let’s add a placeholder <div> for GMap

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

Step 5: Initialize GMap inside component

Let’s break it down.

import { } from '@types/googlemaps';

First we shall import Google Maps types that we have installed in step 2. This is great help during development as you can work with strong types instead of vague any type. Apart from that, you shall also get intellisense if your IDE can understand type definition files.

Access <div #gmap>: gmapElement is a reference to <div #gmap> inside app.component.html file. ViewChild directive creates a direct link between <div> element and a gmapElement member variable.

ngOnInit(): Inside ngOnInit() life cycle hook, we shall create configuration object for GMap specifying default center, zoom level and map type. We shall pass this object to google.maps.Map constructor which shall return new Map object which we shall retain in member variable map for later access.

Running application:

Run application using ng serve and you should see Google Map inside browser. Congrats!! See, it was easy, told ya!

Perform Map operations

By default Google Map control shall render map as well as have few controls for changing zoom, full screen etc. You can access native Google Maps API via Angular.

Change Map type

We have map member variable inside our AppComponent class. Using this variable, we can call native GMap API for example, setMapTypeId. We have three buttons which pass map type ID to click handler to be passed to setMapTypeId function.

Navigate Map via Latitude and Longitude

Let’s create a HTML form for user to enter Latitude and Longitude.

Once user submit the form by entering Latitude and Longitude, we shall call native setCenter GMap API. This function takes object of LatLng type hence we shall pass lat/long as a parameter to LatLng constructor.

Notice e.preventDefault() function call. It is to avoid refreshing complete page on form submit.

These two are just simple examples of how you can access native GMap APIs. You can explore GMap API documentation and implement your business logic as per your need.

You can find complete source code on my GitHub repository here:

Cheers!

Balram Chavan

Written by

Full Stack Developer, GitHub Developer Program Member, Angular enthusiast! https://www.linkedin.com/in/balram-chavan

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade