Playing with Angular Google Maps (AGM)

If you just want to play with AGM and don’t want to set up a full project with NPM, you can use the following Stackblitz. It has all the dependencies to play with Angular, Typescript and of course angular-google-maps:

Play with AGM on Stackblitz.io

Getting started guide video

There’s also a really great video tutorial that follows exactly this guide. So if you prefer videos, we recommend watching this tutorial:

Setting up a basic project structure

If you’re familiar with setting up Angular 2 projects with Angular CLI & TypeScript, you can skip this part and move on to this part:

Setting up Angular Google Maps

Create an Angular CLI project

We start by creating a project with Angular CLI. Angular CLI makes it easy to create an application that already works and allows you to follow the best practices. I you haven’t installed Angular CLI yet, please run the following command first:

npm install -g @angular/cli

Run the following commands to create a new Angular project with Angular CLI:

ng new my-maps-project
cd my-maps-project

Setting up Angular Google Maps

Install Angular Google Maps

Angular Google Maps (short name: AGM) gets shipped via the Node Package Manager (NPM). Run the following command to add it to your new project:

npm install @agm/core

Setup @NgModule

Open src/app/app.module.ts and import the AgmCoreModule. You neeed to provide a Google Maps API key to be able to see a Map. Get an API key here.

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

import { AppComponent } from './app.component';

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

Extending the app component

Angular CLI already created an app component the we’ll now use to create our first google map. Open the file src/app/app.component.ts and modify it like below:

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  title = 'My first AGM project';
  lat = 51.678418;
  lng = 7.809007;
}

Setup the template

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

<h1>{{ title }}</h1>

<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->
<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

Setup the CSS file

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

agm-map {
  height: 300px;
}

Build and run your application

Great! So we have created all the needed source files, so everything should be ready to build an run the application.

Run the following command in the project root folder:

ng serve

Then, open the following URL in your browser: http://localhost:4200/

The command starts the following things: * Starts the TypeScript compiler and compiles all sources files (watches also for file changes in the source files and recompiles all files if something has changed) * Starts a local web server to serve the Angular application. It refreshes the page when served files change.

When everything works as expected, you should see your first Google Map created with AGM 🎉🎉🎉!

Questions?

When you have problems setting up Angular Google Maps (AGM) or questions in general, the best way is to join the chat where you find nice people from the community that can answer you questions:

Chat on Discord