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);
});

[keokaz]

cela fonctionne bien chaque lieu respectif correspond bien à son titre

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
 
  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',
    });
 
    var infowindow = new google.maps.InfoWindow({
      content: "********TEST ******",
    });
 
    google.maps.event.addListener(this.marker, "click", function (data) {
      infowindow.open(this.map, this.marker);
      console.log(this.getTitle());
    });
 
 
    this.marker = new google.maps.Marker({
      position: mapProp.mesMaison2,
      map: this.map,
      title: 'lieu B',
    });
 
    google.maps.event.addListener(this.marker, "click", function (data) {
      console.log(this.getTitle());
    });
 
  }

Par contre j'ai essayer d'afficher la fenêtre l'info en cliquant sur le lieu, mais cela me donne une erreur
j'aimerais pourvoir afficher mon test:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
     zone.js:192 Uncaught TypeError: Cannot read property 'open' of undefined
    at _.xe.eval (app.component.ts:52)
    at Object.trigger (js?libraries=places&AIzaSyDJ0Ou36NAA4gLeWwzoiM6lqTKMzzCNpNc:121)
    at lS.<anonymous> (marker.js:21)
    at Object.trigger (js?libraries=places&AIzaSyDJ0Ou36NAA4gLeWwzoiM6lqTKMzzCNpNc:121)
    at Object.kb (marker.js:15)
    at tm._.m.kb (common.js:153)
    at HTMLAreaElement.Ym.G._.Fm.Qa (common.js:76)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Zone.runTask (zone.js:188)
    at ZoneTask.invokeTask [as invoke] (zone.js:496)

par contre si je met open en dehors j'ai bien ma fenêtre mais du coup cela n'apparaît pas en fonction du clique:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
  infowindow = new google.maps.InfoWindow({
    content: '******TEST********',
  });
 
 
    this.infowindow.open(this.map, this.marker);
 
    google.maps.event.addListener(this.marker, "click", function (data) {
 
      console.log(this.getTitle());
 
    });

[NoSmoking]

Tu as un problème de scope, ton infoWindow doit être déclarée dans ton composant, ensuite c'est dans la fonction sur le click que tu dois faire appel à l'affichage.

[keokaz]

quand tu dis doit être déclarer dans le composant , c'est que infoWindow doit être un attribut dans la class APPcomposant ?

j'ai essayé ceci:

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
 
 export class AppComponent {
 
  @ViewChild('gmapi') gmapElement: any;
 
  map: google.maps.Map;
  marker: google.maps.Marker;
  getMarker: google.maps.event;
  latitude: number = 45.818127;
  longitude: number = 4.749424;
 
  latitude2: number = 46.008172;
  longitude2: number = 4.676125;
 
  contentString = '<div id="content">'+
  '<div id="siteNotice">^^^^^^^^</div>'+
  '</div>';
 
  infowindow = new google.maps.InfoWindow({
    content: this.contentString
  });
 
  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',function(){
     // this.infowindow.open(this.map,this.marker); //genère une erreur
    });
 
    console.log(this.marker+"11111111");
    google.maps.event.addListener(this.marker, "click", function (data) {
      console.log(this.getTitle());
      console.log(this.maker+"22222222");
 
    });
 
    this.marker = new google.maps.Marker({
      position: mapProp.mesMaison2,
      map: this.map,
      title: 'lieu B',
    });

j'ai mis infoWindow comme attribut ,j'ai testé le this.marker en dehors et dans la fonction addListner click,
mais à l'intérieur (this.maker+"2222"), j'ai un indefined, du coup je ne peux appelé la méthode open de

Code :

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

1
2
 
infowindow.open(map, marker);

je suppose que le this de correspond plus à class AppComposant mais à la fonction addListner ?

[NoSmoking]

Beaucoup d'approximations dans ton code, voilà comment je verrais plus simplement les choses

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
export class AppComponent {
  title = "Google-map";
  // données markers
  dataMarkers = [
    { "lat" :44.837368, "lng" :-0.576144, "title" :"Bordeaux",  "info" :"<b>Bordeaux<\/b><br>la suite du texte..."},
    { "lat" :45.194276, "lng" :5.731633,  "title" :"Grenoble",  "info" :"<b>Grenoble<\/b><br>la suite du texte..."},
    { "lat" :43.297612, "lng" : 5.381042, "title" :"Marseille", "info" :"<b>Marseille<\/b><br>la suite du texte..."},
    { "lat" :45.767299, "lng" : 4.834329, "title" :"Lyon",      "info" :"<b>Lyon<\/b><br>la suite du texte..."},
    { "lat" :48.856667, "lng" : 2.350987, "title" :"Paris",     "info" :"<b>Paris<\/b><br>la suite du texte..."}
  ];
  // pour gestion éventuelle
  markers = [];
 
  @ViewChild("carte") gmapElement: any;
 
  map: google.maps.Map;
  infoWindow: google.maps.InfoWindow;
 
  // affichage infoWindow
  showInfoWindow( marker){
    let content = marker.get("info");
    this.infoWindow.setContent(content);
    this.infoWindow.open( marker.getMap(), marker);
  }
  // création d'un marker
  addMarker(map, options) {
    let oMarker = new google.maps.Marker({
      "position": options.position || map.getCenter(),
      "map": map,
      "zIndex": 0
    });
    // ajout data infoWindow because typescript
    oMarker.set("info", options.info || "");
    // ajout événement
    // attention au scope
    let me = this;
    google.maps.event.addListener(oMarker, "click", function (data) {
      me.showInfoWindow( this);    // this ici est le oMarker
    });
    // pour gestion
    return oMarker;
  }
 
  ngOnInit() {
    // création de la carte
    this.map = new google.maps.Map(this.gmapElement.nativeElement, {
      "backgroundColor": "#FFF",
      "streetViewControl": false,
      "zoom": 6,
      "minZoom": 2,
      "mapTypeControl": false,
      "gestureHandling": "greedy",
      "center": {
        "lat": 46.8,
        "lng": 1.7
      },
      "mapTypeId": google.maps.MapTypeId.TERRAIN
    });
    // création infoWindow
    this.infoWindow = new google.maps.InfoWindow({
      content: "Rien pour le moment"
    });
    // création des markers
    this.dataMarkers.forEach( (elem) => {
      // ajout d'un marker
      this.markers.push(
        this.addMarker( this.map, {
          "position": elem,
          "title"   : elem.title,
          "info"    : elem.info
        })
      );
    });    
  }
}

Il te reste à adapter

[EDIT] Modification code pour tenir compte de la rigeur de typescript

[keokaz]

merci de ton bout de code ,

j'ai testé:

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
 
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: google.maps.Marker;
  getMarker: google.maps.event;
  // données markers
  dataMarkers = [
    { "lat": 44.837368, "lng": -0.576144, "title": "Bordeaux", "info": "<b>Bordeaux<\/b><br>la suite du texte..." },
    { "lat": 45.194276, "lng": 5.731633, "title": "Grenoble", "info": "<b>Grenoble<\/b><br>la suite du texte..." },
    { "lat": 43.297612, "lng": 5.381042, "title": "Marseille", "info": "<b>Marseille<\/b><br>la suite du texte..." },
    { "lat": 45.767299, "lng": 4.834329, "title": "Lyon", "info": "<b>Lyon<\/b><br>la suite du texte..." },
    { "lat": 48.856667, "lng": 2.350987, "title": "Paris", "info": "<b>Paris<\/b><br>la suite du texte..." }
  ];
  // pour gestion éventuelle
  markers = [];
 
  titre;
 
  contentString = '<div id="content">' +
    '<div id="siteNotice">^^^^^^^^</div>' +
    '</div>';
 
  infoWindow: google.maps.InfoWindow;
 
  // affichage infoWindow
  showInfoWindow(marker) {
    let content = marker.info;
    this.infoWindow.setContent(content);
    this.infoWindow.open(marker.getMap(), marker);
  }
 
  // création d'un marker
  addMarker(map, options) {
    let oMarker = new google.maps.Marker({
      "position": options.position || map.getCenter(),
      "map": map,
      "zIndex": 0,
      "info":options.info
      });
    // ajout événement
    // attention au scope
    let me = this;
    google.maps.event.addListener(oMarker, "click", function (data) {
      me.showInfoWindow(this);    // this ici est le oMarker
    });
    // pour gestion
    return oMarker;
  }
 
 
  ngOnInit() {
    // création de la carte
    this.map = new google.maps.Map(this.gmapElement.nativeElement, {
      "zoom": 4,
      "center": {
        "lat": 46.8,
        "lng": 1.7
      },
      "mapTypeId": google.maps.MapTypeId.TERRAIN
    });
 
 
    // création infoWindow
    this.infoWindow = new google.maps.InfoWindow({
      content: "Rien pour le moment"
    });
 
    // création des markers
    this.dataMarkers.forEach((elem) => {
      // ajout d'un marker
      this.markers.push(
        this.addMarker(
          this.map, { "position": elem, "title": elem.title, "info": elem.info }
        )
      )
    });
  }
 
}

le visual studio n'aime pas qu'on mette "info":option.info

Code :

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

1
2
 
   info n'est pas attibuable

j'avais pas penser de mettre le this dans une variable et l'appeler plus tard

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
 
  // création d'un marker
  addMarker(map, options) {
    let oMarker = new google.maps.Marker({
      "position": options.position || map.getCenter(),
      "map": map,
      "zIndex": 0,
      });
    // ajout événement
    // attention au scope
    let me = this;
    oMarker.addListener('click', function() {
      me.infoWindow.open(map, oMarker);
    });
 
    // pour gestion
    return oMarker;
  }

Du coup maintenant cela fonctionne, merci encore

[NoSmoking]

le visual studio n'aime pas qu'on mette "info":option.info

c'est plutôt ton transpileur TypeScript qui n'aime pas, il te faut passer par un oMarker.set()/oMarker.get(), j'ai corrigé le code en conséquence, les fonctions deviennent donc

Code :

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

1
2
3
4
5
6
// affichage infoWindow
showInfoWindow( marker){
  let content = marker.get("info");
  this.infoWindow.setContent(content);
  this.infoWindow.open( marker.getMap(), marker);
}

et

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
// création d'un marker
addMarker(map, options) {
  let oMarker = new google.maps.Marker({
    "position": options.position || map.getCenter(),
    "map": map,
    "zIndex": 0
  });
  // ajout data infoWindow because typescript
  oMarker.set("info", options.info || "");
  // ajout événement
  // attention au scope
  let me = this;
  google.maps.event.addListener(oMarker, "click", function (data) {
    me.showInfoWindow( this);    // this ici est le oMarker
  });
  // pour gestion
  return oMarker;
}

[keokaz]

Merci de la correction
cela fonctionne bien

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
 
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: google.maps.Marker;
  getMarker: google.maps.event;
  // données markers
  dataMarkers = [
    { "lat": 44.837368, "lng": -0.576144, "title": "Bordeaux", "info": "<b>Bordeaux<\/b><br>la suite du texte..." },
    { "lat": 45.194276, "lng": 5.731633, "title": "Grenoble", "info": "<b>Grenoble<\/b><br>la suite du texte..." },
    { "lat": 43.297612, "lng": 5.381042, "title": "Marseille", "info": "<b>Marseille<\/b><br>la suite du texte..." },
    { "lat": 45.767299, "lng": 4.834329, "title": "Lyon", "info": "<b>Lyon<\/b><br>la suite du texte..." },
    { "lat": 48.856667, "lng": 2.350987, "title": "Paris", "info": "<b>Paris<\/b><br>la suite du texte..." }
  ];
  // pour gestion éventuelle
  markers = [];
 
  titre;
 
  contentString = '<div id="content">' +
    '<div id="siteNotice">^^^^^^^^</div>' +
    '</div>';
 
  infoWindow: google.maps.InfoWindow;
 
  // affichage infoWindow
  showInfoWindow(marker) {
    let content = marker.get("info");
    console.log("---->"+content);
    this.infoWindow.setContent(content);
    this.infoWindow.open(marker.getMap(), marker);
  }
 
  // création d'un marker
  addMarker(map, options) {
    let oMarker = new google.maps.Marker({
      "position": options.position || map.getCenter(),
      "map": map,
      "zIndex": 0,
      });
        // ajout data infoWindow because typescript
  oMarker.set("info", options.info || "");
    // ajout événement
    // attention au scope
    let me = this;
    oMarker.addListener('click', function() {
      me.showInfoWindow( this);    // this ici est le oMarker
    });
 
    // pour gestion
    return oMarker;
  }
 
 
  ngOnInit() {
    console.log("test");
    // création de la carte
    this.map = new google.maps.Map(this.gmapElement.nativeElement, {
      "zoom": 4,
      "center": {
        "lat": 46.8,
        "lng": 1.7
      },
      "mapTypeId": google.maps.MapTypeId.TERRAIN
    });
 
 
    // création infoWindow
    this.infoWindow = new google.maps.InfoWindow({
      content: "Rien pour le moment"
    });
 
    // création des markers
    this.dataMarkers.forEach((elem) => {
      // ajout d'un marker
      this.markers.push(
        this.addMarker(
          this.map, { "position": elem, "title": elem.title, "info": elem.info }
        )
      )
    });
  }
 
}