Discussion :

[Talsaj]

Bonjour à vous, je suis vraiment pas sûr de poster au bon endroit, mon problème concerne l'api gmap, j'ai créée des marqueurs ou on peut cliquer dessus, en cliquant une fenêtre d'info s'ouvre, avec le titre de la position, sa géolocalisation etc, j'arrive à déplacer cette fenêtre dans la map mais ce que je dois faire c'est la faire apparaitre en dehors de cette map, à endroit défini qui restera toujours le même peu importe le marqueur, je vous partage mon code même si je suis pas sûr que ce soit utile. Ce code est un code de test donc ne vous étonnez pas si c'est pas très propre. Merci beaucoup à ceux qui donneront de leurs temps pour m'aider ou simplement s'intéresser à mon problème.

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
 
class MapApi{
 
    constructor(){
        this.url = "https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=e1ed98cd909b60fcdc3c4093cfc1734ab8c95fb6";
        this.get_url();
    }
 
    initMap(){
        depart = {lat: 45.755547, lng: 4.836044};
        map = new google.maps.Map(document.getElementById("map"), {
            zoom:11,
            center: depart
        })};
 
    get_url() {
        $.get(this.url, this.afficher).done(function(){});
    }
 
    afficher(data){
        data.forEach(function(element){
            var infowindow = new google.maps.InfoWindow({
                content:'<div class="fenetreinfo">' + 
                '<h1>' + element.name + '</h1>' +
                '<p> Adresse :' + element.address + '</p>' +
                '<p> Disponibilite : </p>' +
                '<p> position : ' + Object.values(element.position) + '</p>' +
                '</div>',
                pixelOffset: new google.maps.Size(300,100)
            });
              var marker = new google.maps.Marker({
                  position: element.position,
                  map: map,
                  title: element.name
              });
              marker.addListener('click', function(){
                  infowindow.open(map,marker);
              });
        });
}
 
 
}
// Lyon : 45.755547, 4.836044
var map;
function initMap(){
var myLatLng = {lat: 45.755547, lng: 4.836044};
map = new google.maps.Map(document.getElementById("map"), {
    zoom:11,
    center: myLatLng
});
 
}
 
 
mapapi = new MapApi();

[NoSmoking]

Bonjour,
il te faut afficher les informations relatives aux marqueurs dans un élément hors carte.
Dans un premier temps crées un élément dans ta page, par exemple

Code html :

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

<div id="marker-infos"></div>

Ensuite dans ton constructeur et à la lecture des données il te faut garder l'info dans le marqueur, par exemple

Code :

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

1
2
3
4
5
6
var marker = new google.maps.Marker({
    innerData: element,             // stocke les infos
    position: element.position,
    map: map,
    title: element.name
});

Sur le click du marqueur il te suffit d'afficher les informations en appelant une fonction ,showInfoMarker, par exemple

Code :

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

1
2
3
4
marker.addListener("click", function(){
    showInfoMarker(this);
    // infowindow.open(map,marker);
});

ta fonction showInfoMarker pourrait être définie comme ceci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function showInfoMarker(marker) {
  var info = marker.innerData;
  // création contenu, en gros ce que tu mettais dans ton InfoWondow
  var content =    
    "<div class='fenetreinfo'>" + 
    "<h1>" + info.name + "</h1>" +
    "<p>Adresse :" + info.address + "</p>" +
    "<p>Disponibilite : </p>" +
    "<p>Position : " + Object.values(info.position) + "</p>" +
    "</div>";
  // affichage résultat
  document.getElementById("marker-infos").innerHTML = content;  
}

[Talsaj]

D'accord c'est beaucoup plus clair maintenant, merci à toi d'avoir pris le temps de m'expliquer, sujet résolu