Google Maps and Angular2

Pablo Ezequiel
Mar 8, 2017 · 3 min read

I will try to integrate Google Maps in a typical Angular2 App. I will use 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:

The component is in blank and ready

Step #02: Install

I am following

first step:

npm install angular2-google-maps --save

declare in NgModule

import { AgmCoreModule } from 'angular2-google-maps/core';const googleMapsCore = AgmCoreModule.forRoot({

Step #03: Let´s code a little!

We just need:

css:.sebm-google-map-container {
height: 300px;
class GgmapsComponentlat: number = -32.9477132;
lng: number = -60.630465800000025;

And It´s working in the next way:

a little more complex sample:

And the result:


Input box to coordenadas

Ok!, I will stop the post at this point, I was pretty easy to use the angular2-google-maps in the project.


Pablo Ezequiel

Written by

Dev and Tech. Sharing while I am learning (#cloud, #mobile)