Angular:Integration de google maps
Google Maps offre les fonctionnalités suivantes :
- affichage cartographique extérieur et intérieur
- rechercher des lieux, leur localisation précise
- obtenir un itinéraire en voiture, en transport en commun, à pied ou à vélo
- afficher des informations sur le trafic
- visualiser un lieu avec Google Street View
- connaitre sa position en se géolocalisant sur la carte
- accéder à des images satellites, aériennes et obliques (images hélicoptères)
- rechercher des informations sur des Points d'intérêt (adresse, horaires d'ouverture/fermeture, fréquentation, avis, photographies...).
Intégration du google maps:
app.component.html
<div style="padding:10px;border:1px solid #ddd;margin:10px;">
<agm-map [latitude]='lat' [longitude]='long'>
</agm-map>
</div>
app.component.ts
import { Component,Input } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@Input() mapTypeId: keyof typeof google.maps.MapTypeId = 'ROADMAP';
lat = 17.4754;
long = 175.1248;
googleMapType = '"HYBRID" | "ROADMAP" | "SATELLITE" | "TERRAIN"';
}
app.component.css
agm-map {
height: 300px;
}
Google Key API
Afin d'utiliser l'API google maps on a besoin de générer une clé privé qui sera utilisé dans le projet Angular pour consommer l'api.
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//importer le module AGM contenant les fonctionnalités de google maps
import { AgmCoreModule } from '@agm/core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule ,
ReactiveFormsModule,
AgmCoreModule.forRoot({
apiKey: 'Votre API KEY'
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }