Discussion :

[keokaz]

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":


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

[NoSmoking]

Bonjour,

mais je n'arrive pas à récupérer l'objet maker courant auquel je clique.

pourquoi ne pas mettre l'écouteur directement sur le marker comme cela se fait traditionnellement ?

[keokaz]

Merci de ta réponse ,

comment je fais pour mettre l'écouteur sur le maker (je dois avoir des lacunes dessus ...) ?


si je fais ceci:

Code html :

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

  <div #gmapi style="width:100%;height:400px" (click)="getInfo(marker)"></div>

donc si je dis pas de bêtise, je met en paramètre maker, qui correspond à l'attribut de la class appComponent

Code :

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

1
2
3
4
5
6
export class AppComponent {
 
  @ViewChild('gmapi') gmapElement: any;
 
  map: google.maps.Map;
  marker;

si je clique sur le lieu, qui est l'ensemble de la carte et qui contient aussi un des lieux, je dois pouvoir récupérer son écouteur avec une méthode ?
pour le moment j'obtient toujours "lieuB" avec la console.log quelque sois le lieu

Code :

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

1
2
3
  getInfo(marker) {
    console.log(marker);//toujours lieu B
  }

donc je dois trouver la méthode qui récupère l'écoute du lieu que j'ai cliqué

Code :

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

1
2
3
  getInfo(marker) {
    console.log(marker.recupere_l_element_cliquer);
  }

[NoSmoking]

... pour le moment j'obtient toujours "lieuB" avec la console.log quelque sois le lieu

De ce que l'on voit dans ton code tu écrases la référence du premier marker lorsque tu crées le deuxième

Code :

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

1
2
3
4
5
6
7
8
9
10
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',
})

comment je fais pour mettre l'écouteur sur le maker (je dois avoir des lacunes dessus ...) ?

au moment de la création des tes markers tu ajoutes l'écouteur, quelque chose comme

Code :

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

1
2
3
marker.addListener('click', () => {
      this.la_fonction_a_appliquer(marker); // par exemple
});

à toi d'adapter dans le contexte Angular.

[keokaz]

merci de ta réponse,
j'ai un peu saisi ton explication, mais je bloque la création des markers, peut être qu'il faut que je les créer autrement:

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
 
 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.addListener('click', () => {
      this.markerHandler(this.marker);
    });
 
    this.marker = new google.maps.Marker({
      position: mapProp.mesMaison2,
      map: this.map,
      title: 'lieu B',
    })
    this.marker.addListener('click', () => {
      this.markerHandler(this.marker);
    });
 
  }
 
  markerHandler(marker: google.maps.Marker) {
    console.log(marker.getTitle());
  }

je pense que je n'ai pas compris comment ajouter correctement des points dans la map.
qu'est ce que cela veut dire quand je fais ceci ?

Code :

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

1
2
 
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);

this.map est t'il un objet qui correspond à tout les événement à charger qu'on va appliquer sur ce lieu (click , survol ..) ainsi que ses coordonnée et informations sur ce lieu

Code :

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

1
2
3
4
5
6
 
   this.marker = new google.maps.Marker({
      position: mapProp.mesMaison, 
      map: this.map, // ? 
      title: 'lieu A',
    })

j'ai tenté de regarder à l'intérieur:

Code :

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

1
2
3
4
5
 
    this.marker.addListener('click', () => {
      console.log(this.marker.map); //au click cela m'affiche rien du tout
      this.markerHandler(this.marker); //cela m'affiche lieu B
    });

[NoSmoking]

As tu essayé d'utiliser les google.maps.event qui retournent des données sur l'élément concerné, cela ressemble à

Code :

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

1
2
3
google.maps.event.addListener(marker, "click", function (data) {
  console.log( this, data);
});