Google Maps and Angular

3 min readMar 8, 2017

I will try to integrate Google Maps in a typical Angular App. I will use https://angular-maps.com/ and let see whats happening.

My App

I built this Angular app with anguar-cli, this is an early stage and very typical master-detail app with an input form:

The project structure at this point is:

Let´s start

With the integration and demo page:

Step #01: a new component

I will add a new component called “Google Maps” on the Navbar, and this is the place where I will add the new map:

$ ng generate component ggmaps

And we edit the routes:

Step #02: Install

I am following

Getting started 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…

angular-maps.com

first step:

npm install angular2-google-maps --save

declare in NgModule

import { AgmCoreModule } from 'angular2-google-maps/core';const googleMapsCore = AgmCoreModule.forRoot({
  apiKey : 'YOUR_API_KEY_GOOGLE_MAPS',
});

Step #03: Let´s code a little!

We just need:

html:<sebm-google-map
     [latitude]="lat"
     [longitude]="lng">
  <sebm-google-map-marker
     [latitude]="lat"
     [longitude]="lng">
   </sebm-google-map-marker>
</sebm-google-map>css:.sebm-google-map-container {
  height: 300px;
}class GgmapsComponentlat: number = -32.9477132;
lng: number = -60.630465800000025;