Ajout d'un marker après Geocoding
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:
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 :
Citation:
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:
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:
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
