Getting started

Let's start from zero and build an Angular 2 app with angular2-google-maps

Playing with angular2-google-maps

If you just want to play with angular2-google-maps and don't want to set up a full project with NPM, you can use the following Plunker. It has all the dependencies to play with Angular2, Typescript and of course angular2-google-maps:

» Play with angular2-google-maps on Plunker

Setting up a basic project structure

Note

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 angular2-google-maps

Installing TypeScript

angular2-google-maps works best with TypeScript version 1.8+. If you have an older version of TypeScript or haven't installed TypeScript yet, please run the following command:

npm install -g typescript@2.0.0

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@webpack

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

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

Setting up angular2-google-maps

Install angular2-google-maps

angular2-google-maps gets shipped via the Node Package Manager (NPM). Run the following command to add it to your new project:

npm install angular2-google-maps --save

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, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { AgmCoreModule } from 'angular2-google-maps/core';

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_KEY'
    })
  ],
  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: string = 'My first angular2-google-maps project';
  lat: number = 51.678418;
  lng: number = 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: -->

<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

Setup the CSS file

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

.sebm-google-map-container {
  height: 300px;
}

CSS styling is required!

It is really important that you define a height for the css class .sebm-google-map-container. Otherwise, you won't see a map on the page!

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 2 application. It refreshes the page when served files change.

When everything works as expected, you should see your first Google Map created with angular2-google-maps 🎉🎉🎉!

Questions?

When you have problems setting up angular2-google-maps or questions in general, the best way to join the chat where you can ask your questions:

» Chat on Gitter