menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular PFE

Angular:Integration de google maps

folder Projet: angularApp
Google Maps offre les fonctionnalités suivantes :
  1. affichage cartographique extérieur et intérieur
  2. rechercher des lieux, leur localisation précise
  3. obtenir un itinéraire en voiture, en transport en commun, à pied ou à vélo
  4. afficher des informations sur le trafic
  5. visualiser un lieu avec Google Street View
  6. connaitre sa position en se géolocalisant sur la carte
  7. accéder à des images satellites, aériennes et obliques (images hélicoptères)
  8. rechercher des informations sur des Points d'intérêt (adresse, horaires d'ouverture/fermeture, fréquentation, avis, photographies...).

Intégration du google maps:

npm install @agm/core --save
npm i @types/googlemaps@3.39.13 --save-dev

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 { }

Afin d'utiliser cet API il faut l'activée en remplissant le formulaire google billing