Récupérer le "marker" (google map)

Version imprimable

1 pièce(s) jointe(s)

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

Pièce jointe 380487
voici mon composant:

Code:

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:

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:

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

15/05/2018, 19h42
NoSmoking

Bonjour,

Citation:

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 ?
16/05/2018, 23h22
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:

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

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:

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:

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

Citation:

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

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', })
Citation:

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:

1 2 3 marker.addListener('click', () => { this.la_fonction_a_appliquer(marker); // par exemple });
à toi d'adapter dans le contexte Angular.

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:

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:

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:

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:

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

18/05/2018, 14h54
NoSmoking
As tu essayé d'utiliser les google.maps.event qui retournent des données sur l'élément concerné, cela ressemble à
Code:

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

cela fonctionne bien :) chaque lieu respectif correspond bien à son titre

Code:

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:

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:

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

19/05/2018, 09h28
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.

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:

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:

1
2
 
infowindow.open(map, marker);

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

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

Code:

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

merci de ton bout de code :),

j'ai testé:

Code:

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:

1
2
 
   info n'est pas attibuable

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

Code:

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

Citation:

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

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

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

Code:

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

Merci de la correction :)
cela fonctionne bien

Code:

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