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 –
 Core - Angular 6 Google Maps components&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..
|
