Google Maps and Angular2

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

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({
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 GgmapsComponent
lat: number = -32.9477132;
lng: number = -60.630465800000025;

And It´s working in the next way:

a little more complex sample:

And the result:

TODO:

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.

References

Like what you read? Give Pablo Ezequiel a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.