Categories

Thursday, October 3, 2024
#919814419350 therichposts@gmail.com
Angular 8Angular 9Google MapGoogle Map Api

Angular 9 Google Maps working example

angular google maps

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Google Maps working example.

angular google maps
angular google maps

Post Working:

I am showing google maps in Angular 9.

Here is the complete code snippet and please follow carefully:

1. Very first, here are common basics steps to add angular 9 application on your machine:

$ npm install -g @angular/cli

$ ng new angulargooglemaps // Set Angular9 Application on your pc

cd angulargooglemaps // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server

 

2. Now run below command into your terminal to include google maps package into your angular 9 application:

npm install @agm/core --save

 

3. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { AppComponent } from './app.component';

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

 

4. Add, below code into your app.component.ts file:

import { Component } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angulargooglemap';
  lat: number = 43.653908;
  lng: number = -79.384293;
}

 

5. Add below code into app.component.html file:

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

 

5. Finally add below code into app.component.css file:

agm-map {
    height: 300px;
  }

 

This is it and if you have any kind of query then please let me know. Don’t forget to run ng serve command.

Jas

Thank you

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

9 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.