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
it–
Angular
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 –
