Ajout d'un marker après Geocoding

**niceguytoby_real** · 20/03/2020, 01h20

Bonjour,

Je réalise une application avec AngularJS pour afficher un itinéraire entre des Parkings (coordonnées en BDD) et l'adresse de l'utilisateur(Geocoding)

Voici ma fonction exécutée dans ngOnInit()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  initMap() {
    // Afficher la map, centrée sur le Parking, et y place un Marker
    var positionParking = {lat: this.park.coords.lat, lng: this.park.coords.lng};
    this.map = new google.maps.Map(document.getElementById('map'), {zoom: 13, center: positionParking});
    var marker = new google.maps.Marker({position: positionParking, map: this.map, title: 'Parking'});
 
    // Ici je commence le geocoding
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': '57 Route de Grenoble 06200 Nice' }, function (results, status){
      if (status == 'OK') {
        var location = results[0].geometry.location;
        console.log(results[0]); // ces logs sont bien visibles dans la console donc le geocoding fonctionne ... N'est ce pas ?
        console.log(location);
        // var positionParkeur = {lat: results[0].geometry.location.lat, lng: results[0].geometry.location.lng};  Ici une autre méthode que j'ai essayé, remplacer 'location' par 'positionParkeur' dans la ligne suivante
        var marker2 = new google.maps.Marker({position: location, map: this.map, title: 'Parkeur'});
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

Et voici l'erreur que j'obtiens :

InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

J'ai aussi eu du mal à comprendre ma clé API Google Maps car je n'ai trouvé aucun tutoriel avec la même interface que la mienne dans Google Cloud Platofrm ... (Server Key ou Browser Key)

Pouvez-vous m'aiguillez ?
Est-ce un problème d'utilisation de ma clé API ? Est-ce un problème avec mon code ?

Pour info, j'utilise ma clé comme ça :
dans index.html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Proto</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <script src="https://maps.googleapis.com/maps/api/js?key=MACLEJEVOUSLADONNEPASMDR"
    async defer></script>
  <app-root></app-root>
</body>
</html>

dans app.module.ts:

Code ts :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
imports: [
    BrowserModule,
    ...,
    AgmCoreModule.forRoot({
      apiKey: 'MACLEJEVOUSLADONNEPASMDR'
    })
  ],

Si vous avez besoin de codes supplémentaires n’hésitez pas à me le demander, je vais tout donner pour être le plus réactif possible à vos réponses
Merci beaucoup, des bisous, faites l'amour pas la guerre