5 minutes with Angular2 Google Maps

I usually work with Node.js and JS/Javascript and a while ago had some exposure to Ext JS (I can’t claim I know a great deal of it), so I was interested in finding out about AngularJS or React. After a full day Java development and some good fight with merge conflicts (I won in the end), I decided that AngularJS would be the “chosen one” (the Skywalker of the Javascript Web Application Frameworks). I followed the Angular CLI first to get started and build a basic application in TypeScript and took it from there by making changes as I go along with the API documentation. Once launched

ng serve --open

to serve my first application and having played a bit with app.component.html and app.component.css, I was eager to find out an example where Angular can shine and be amazing and I happily discovered Angular 2 Components for Google Maps aka angular2-google-maps. Here a few steps in order to create a Google Maps with two markers with a map info window attachef that displays on click, in a nutshell a very gentle “getting started” tutorial.

Let’s assume that Node.js and NPM (Node Package Manager) is already installed.

  • Install Typescript
npm install -g typescript@2.0.0
  • Install AngularJS CLI:
npm install -g angular-cli@webpack
  • Create your new project
ng new my-app-project
cd my-app-project

Install angular2-google-maps via NPM:

npm install angular2-google-maps --save

The most important files you will need to modify are inside

my-app-project/src/app

There you will find the following:

app.component.ts
app.module.ts
app.component.css
app.component.html

App.component.ts includes the building blocks of an Angular application: components. component is the combination of an HTML template and a component class that controls a portion of the screen.

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';
 lat1: number = 51.531826;
 lng1: number = -0.124391;
 lat2: number = 51.511899;
 lng2: number = -0.123270;
}

In our case, the class controlling what it is displayed is called AppComponent and other than the title, it includes longitudine and latitude for two markers. It also refers to our html and css files.

App.module.ts, instead, describes how the elements of the application fit together. Every application has at the very least one Angular module, the root module that you bootstrap to launch the application for which the conventional name is AppModule. You will have a number of imports together with @NgModule, that is basically orchestrates how to run and compile the module code. It includes some main properties, as follows:

  • imports, that are additional modules to be supported, even custom-made;
  • providers used to make services and values known to the dependency injection framework;
  • declarations used to declare components, directives, pipes that belongs to the current module;
  • boostraps, that are the main components to be bootstrapped.
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: 'MY_API_KEY'
 })
 ],
 providers: [],
 declarations: [
 AppComponent
 ],
 bootstrap: [AppComponent]
})
export class AppModule {}

 Finally, we have the html and css for our newly created app:

<h1>{{ title }}</h1>

<sebm-google-map [latitude]="lat1" [longitude]="lng1" 
                 [latitude]="lat2" [longitude]="lng2">
 <sebm-google-map-marker [latitude]="lat1" [longitude]="lng1">
   <sebm-google-map-info-window [disableAutoPan]="true">
   This is the location of <strong>Kings Cross Station</strong>
   </sebm-google-map-info-window>
 </sebm-google-map-marker>
 <sebm-google-map-marker [latitude]="lat2" [longitude]="lng2">
   <sebm-google-map-info-window [disableAutoPan]="true">
   This is the location of <strong>Covent Garden</strong>
   </sebm-google-map-info-window>
 </sebm-google-map-marker>
</sebm-google-map>
.sebm-google-map-container {
 height: 300px;
 }

The result would then look like this:

 

Screen Shot 2017-05-21 at 20.17.05.png

Advertisements

Posted on May 21, 2017, in Uncategorized. Bookmark the permalink. Leave a comment.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: