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
6

Angular 5, 6 Google Maps (AGM) API Key - Integrating Google Maps

This sample application has the purpose of demonstrating how to Integrating Google Maps in Angular Applications?

The following steps are –
1.      Install Google Maps
2.      Setup YOUR_API_KEY in NgModule
3.      Setup your lat and lng in your component
4.      Setup Google template
5.      Setup your CSS for height and width, it must be setup.

Steps 1 - Install Angular Google Maps using below CLI command -
npm install @agm/core --save

Steps 2 - Setup YOUR_API_KEY in NgModule
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:'AIzaSyAfJTVKnpLl0ULuuwDuix-9ANpyQhP6mfc'
      //This is a GoogleAPIs Key. I already created using Google developer account.
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Steps 3 - Setup your lat and lng in your component
import { Component } from '@angular/core';

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


Steps 4 - Setup your Google template in your template
<h3>Angular Google API</h3>
<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->
<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

Steps 5 - Setup your CSS for height and width. You must add this css class.
agm-map {
    height: 350px;
}

For reference – watching your YouTube video https://youtu.be/-p2gZsNeFJg
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