This sample application has the purpose of
demonstrating how to Integrating Google Maps in Angular Applications?
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.
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
 API Key - Integrating Google Maps&via=stc_network)
|
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..
|
You Might Also Like
