Angular 2 Google Maps

Angular 2 Google Maps is a component used to display a Google Map in your angular 2 app.

angular 2 google maps
angular 2 google maps

Easy to use angular 2 Google maps developed with typescript and uses Google Map api.

Download our Google Maps Component from here: (Compatible Angular 2 final release) ready to run example.

With a step by step on how to run the demo.

 

 

Let’s build our first angular 2 Google maps App.

angular 2 google maps setup
angular 2 google maps setup

Setup:

  • The first step is the google maps component installation after you download the file above and unzip the content (Check if NodeJs is already installed on your computer) and run this command from command line:
npm install

 

  • Add the Google Maps API Key  to this file file app.module.ts :
...
AgmCoreModule.forRoot({
      apiKey: 'Your - > Google-MAPS-API-KEY - here' //google maps api key
    }),//google maps
   
.... 

 

Now it’s time to write our first example:

angular 2 google maps example
angular 2 google maps example

 

Our first angular 2 Google Map Example.
first file : googlemaps-demo.component.ts:


import { Component } from '@angular/core';

@Component({
  selector: 'googlemaps-root',
  templateUrl: 'googlemaps-demo.component.html',
  styleUrls: ['googlemaps-demo.component.css'],
})
export class GoogleMapsDemoComponent {
  title: string = 'My first angular 2 google maps example';
  lat: number = 51.678418;
  lng: number = 7.809007;
}

second file : googlemaps-demo.component.ts:



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


<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->

<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

our component example uses typescript as programming language.

all files from the download button:

angular 2 google maps

angular 2 google maps