How to Integrate Google Maps in Angular 8 Application

Last Updated on by in Angular

This is a comprehensive tutorial about how to work with Google Maps in the Angular application. In this tutorial, we will learn how to create an interactive Google Map in Angular.

We will learn how to add Google Maps using Google Maps API manually, we are going to rely on Open source Google API to achieve the task.

Also, we will use Angular Google Maps (AGM) Core plugin to embed the map in the Angular application. It is a superb plugin to create Google Maps components in Angular.

The @agm/core offers simple solutions for the Google Maps JavaScript Core API. It is a lightweight, well-know plugin for Google maps integration and being downloaded 1,00,000+ times weekly.

Angular 8 Google Maps Integration Example

  • Create Angular Application
  • Install Angular Google Maps Plugin
  • Get Maps API Key
  • Add Google Maps Module in App Module
  • Create Google Map in Angular

Create Angular Application

Let’s begin with creating a brand new angular application using the following command:

ng new angular-google-maps-example

Get inside the project root:

cd angular-google-maps-example

Install Angular Google Maps Plugin

Run the command to install angular google maps package from the command-line tool:

npm install agm/core@1.1.0

The agm core package might throw “Generic type ‘ModuleWithProviders’ requires 1 type argument(s)” error, you may fix this error by adding "skipLibCheck": true, in your tsconfig.app.json file.

Get Maps API Key

Now, we have to configure the google maps plugin in angular application. So, first, you have to have the Maps API Key, and you can go here to get the complete instructions.

Add Google Maps Module in App Module

Next, import the AgmCoreModule from ‘@agm/core’ and register the AgmCoreModule in imports array along with your Maps API key.

Add the code in app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: '',
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

Create Google Map in Angular

Now, we will create a simple google map, open the app.component.html file and add the following code inside.

<agm-map [latitude]="lat" [longitude]="lng"></agm-map>

We define the latitude and longtitude of some place to display the map of it, Also defined the map type of satellite.

Add the following code in app.component.ts file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
  lat: number = 52.488328;
  lng: number = 8.717017;
}

Open the file src/app/app.component.scss and paste the following content:

agm-map {
  height: 400px;
}

Let’s test out the application therefore use the suggested command to start the application:

ng serve --open

Finally, we have done with this tutorial and we learned how to integrate Google Maps in Angular project.

Conclusion

Google Maps is a popular web-based mapping service and navigation tool developed by Google. It gives detailed information to users regarding maps, satellite imagery, street view, and real-time traffic conditions.

Google Maps provides a wide range of features and functionalities that make it a valuable tool for various purposes, such as planning routes, finding local businesses, exploring neighbourhoods, and obtaining directions.

Here are some key features of Google Maps:

Maps: Google Maps offers detailed and interactive maps that can be viewed in different modes, including map view, satellite view, and terrain view. Users can zoom in and out to explore specific areas or get an overview of a region.

Directions: Google Maps provides step-by-step directions for driving, walking, biking, or using public transportation. It calculates the estimated travel time and suggests the best routes based on real-time traffic conditions.

Street View: With Street View, users can explore and navigate through 360-degree panoramic street-level images. This feature allows users to virtually walk or drive through various locations around the world.

Business Listings: Google Maps includes a comprehensive database of businesses and points of interest. Users can search for specific types of businesses, such as restaurants, hotels, gas stations, or shops, and view information like reviews, ratings, opening hours, and contact details.

Traffic Information: Google Maps uses real-time traffic data to provide information on traffic conditions, congestion, and estimated travel times. It can help users avoid traffic jams and choose the most efficient routes.

Public Transit: Google Maps integrates public transit information, including bus, train, and subway schedules, routes, and fares. Users can plan their trips using public transportation and get accurate directions and schedules.

Offline Maps: Google Maps allows users to download maps of specific areas for offline use. This is particularly useful when traveling to areas with limited or no internet connectivity.

Explore: The Explore feature suggests nearby places of interest, including restaurants, attractions, shopping centers, and more. Users can discover new places and get recommendations based on their location and preferences.

Google Maps is available as a web application for desktop and mobile devices, as well as a standalone app for iOS and Android. It has become an essential tool for navigation, travel planning, and exploring the world around us.