Measure Area and Distance in Google Maps — Angular

3 min readOct 10, 2022

In order to measure the distance over the google map, we must have a working application with angular. so we will having two steps.

Integrate Goolge map to angular

It will be divided into couple of steps

<head> ...<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry" type="text/javascript"></script></head>

3. Install the package

npm i @types/googlemaps @types/googlemaps

4. Update the tsconfig files

Add “googlemaps” types under compilerOptions to both files tsconfig.json and tsconfig.app.json as shown below:

5. Add Styling

For styling component let’s add bootstrap

npm i bootstrap

Add the bootstrap.min.css file path to angular.json file under styles as

Path is given as

"./node_modules/bootstrap/dist/css/bootstrap.min.css"

5. Code snippet for goolge map integration to component

Let’s consider app component to add the goolge map, After updating the files app component looks like as below.

app.component.ts

app.component.html

app.component.css

5. Serve the project and observe

Cool 🚀! Finally we can see the map is rendered look like as

Let’s jump into measurement tool integrate to map. It includes following steps

npm i measuretool-googlemaps-v3

2. Perform imports to component and update the ts and html files

app.component.ts

app.component.html

3. Fixing the console error relating to import

After we made above changes, we can notice the following error

For its fix, let create a file named as “index.d.ts” inside src folder and add the following lines

declare module 'measuretool-googlemaps-v3/dist/gmaps-measuretool.umd.js';

4. Time to play with tool

Finally, we have Google map being rendered along with measurement tool button:

So here we can see that measurement distance and area calculated been shown above. Enjoy 🎉