Bonsoir, je débute avec l'api de google, j'ai testé pour afficher une carte avec 2 lieu,
mon but est que si je clique sur un lieu, j'ai une petite fenêtre qui surgit, pour le moment j'arrive
à afficher la fenêtre en question, mais je n'arrive pas à récupérer l'objet maker courant auquel je clique.

voici la fenêtre "immeuble":

Nom : map.png Affichages : 1790 Taille : 91,1 Ko
voici mon composant:


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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { Component } from '@angular/core';
import { ViewChild } from '@angular/core';
import { } from '@types/googlemaps';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  @ViewChild('gmapi') gmapElement: any;
  map: google.maps.Map;
  marker;
  marker2;
  latitude:number = 45.818127;
  longitude:number =  4.749424;
  contenu:string ='<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">immeuble </h1>'+
  '<div id="bodyContent">'+
  'une photo'+
  '</div>'+
  '</div>'
 
  latitude2:number = 46.008172;
  longitude2:number =  4.676125;
 
  infoPoint = new google.maps.InfoWindow({
    content:this.contenu
  })
 
  ngOnInit() {
    var mapProp = {
      mesMaison: {lat:this.latitude,lng:this.longitude},
      mesMaison2: {lat:this.latitude2,lng:this.longitude2},
      center: new google.maps.LatLng(this.latitude,this.longitude),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
    this.marker = new google.maps.Marker({
      position: mapProp.mesMaison,
      map:this.map,
      title: 'lieu A',
    })
    this.marker = new google.maps.Marker({
      position: mapProp.mesMaison2,
      map:this.map,
      title: 'lieu B',
    })
  }
 
  getInfo($event){
 
    console.log($event); 
    this.infoPoint.open(this.map,this.marker);     
  }
 
}
pour le moment lorsque je clique sur l'un ou l'autre lieu (lieu A ou lieu B), j'ai toujours la fenêtre surgissant de dernier maker(puisqu'il est écrasé par le deuxième).
si je souhaite obtenir le maker courant , est t'il déjà dans $event ?

voici mon console.log event:
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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
MouseEvent {isTrusted: true, noClick: true, screenX: 596, screenY: 353, clientX: 625, …}
altKey
:
false
bubbles
:
true
button
:
0
buttons
:
0
cancelBubble
:
false
cancelable
:
true
clientX
:
625
clientY
:
267
composed
:
true
ctrlKey
:
false
currentTarget
:
null
defaultPrevented
:
false
detail
:
1
eventPhase
:
0
fromElement
:
null
isTrusted
:
true
layerX
:
-170
layerY
:
-11
metaKey
:
false
movementX
:
0
movementY
:
0
noClick
:
true
offsetX
:
-170
offsetY
:
-12
pageX
:
625
pageY
:
267
path
:
(16) [area, map#gmimap0, div.gmnoprint, div, div, div, div, div.gm-style, div, div, div.container, app-root, body, html, document, Window]
relatedTarget
:
null
returnValue
:
true
screenX
:
596
screenY
:
353
shiftKey
:
false
sourceCapabilities
:
InputDeviceCapabilities {firesTouchEvents: false}
srcElement
:
area
target
:
area
timeStamp
:
5605.999999999767
toElement
:
area
type
:
"click"
view
:
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
which
:
1
x
:
625
y
:
267
__proto__
:
MouseEvent
ma vue est très simple:

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
<div class="container">
 
  <div style="text-align:center">
    <h1>
      <span class="label label-success">Test map</span>
    </h1>
  </div>
  <br>
 
 
 
          <div #gmapi style="width:100%;height:400px" (click)="getInfo($event)"></div>
 
 
</div>

si vous avez une idée, merci d'avance pour la réponse