python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 6 Google Maps

Angular Google Maps (AGM) Core - Angular 6 Google Maps components

In this article, I am going to share the Angular 6 Google Maps using the AGM Core. To archive, involves multiple steps which are the following.

Explore itAngular 6 Questions

Steps 1 - Create your Angular 6 project and go to project directory and install the below command.

Steps 2 - Install Angular 6 Google Maps
npm install @agm/core


Steps 3 -Import the AgmCoreModule in the app.module.ts .
import { AgmCoreModule } from '@agm/core';

Steps 4 - And add the Agm Core Root for Google API key and it looks like –
import { BrowserModule } from '@angular/platform-browser';
import { NgModule,  } from '@angular/core';
import { AppComponent } from './app.component';

import { AgmCoreModule } from '@agm/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyAFgM81Qz-SwfTzUsr4F51AgDj0HdN88CQ' //Google API key for maps
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Note – You must need to provide a Google Maps API key to be able to see a Map. Get an APIkey here...

Steps 5 - Added the components - app.component.ts, app.component.html and app.component.css -

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  lat: number = 26.765844;
  lng: number = 83.364944;
}

Note – I have added Gorakhpur, Uttar Pradesh, India’s Geographic Information (Latitude and Longitude).

Steps 6 - Setup your Google HTML template -
<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

Steps 7 - Setup your Google template CSS class for managing the height and width. You must add the CSS class, without this class not display the Google Maps.

agm-map {
    height: 400px;
    width: 400px;
}

Result 

ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions