Google Maps and Angular

Pablo Ezequiel
Mar 8, 2017 · 3 min read

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:

Image for post
Image for post

The project structure at this point is:

Image for post
Image for post

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:

Image for post
Image for post
$ ng generate component ggmaps

And we edit the routes:

Image for post
Image for post
Image for post
Image for post
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',
});
Image for post
Image for post

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;
Image for post
Image for post

And It´s working in the next way:

Image for post
Image for post

a little more complex sample:

Image for post
Image for post

And the result:

Image for post
Image for post

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store