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)
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
