Discussion :

[rlelamer]

Bonsoir,

Je souhaite mettre en place la possibilité de créer et supprimer un marker qui me donne la position GPS là où je clique et là où je le déplace.

La création et le déplacement, par clic droit se fait comme ceci (fonctionnel)

Code JS :

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

1
2
3
4
5
6
7
8
9
            google.maps.event.addListener(map, "rightclick", function (event) {
                markerWpt = new google.maps.Marker({
                    position: event.latLng,
                    map: map,
                    title: "WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng()),
                    label: {text: "M", color: "limegreen"},
                    draggable: true
                });
            });

La suppression se fait comme ceci (fonctionnel)

Code JS :

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

1
2
3
4
            google.maps.event.addListener(map, "click", function (event) {
                markerWpt.setMap(null);
                markerWpt = null;
            });

2 points ne fonctionnent pas :

- les coordonnées GPS du point que je déplace ne s'actualisent pas.
J'ai cru comprendre que je dois utiliser ceci

Code JS :

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

1
2
3
            google.maps.event.addListener(markerWpt, "dragend", function (event) {
                // ici je vois pas que mettre pour que le marker affiche les nouvelles coordonnées
            });

- Je peux créer un nombre (infini ?) de marker mais seul le dernier créé est supprimé, les autres restent sur la map.
Comment je peux faire pour, soit limiter la création à un seul marker, soit que lors du "click", tous soient pris en compte pour la suppression ?

Merci

[NoSmoking]

Bonjour,
les réponses à tout ce que tu cherches à faire sont dans
FAQ API Google Maps

[rlelamer]

Bonjour NoSmoking.
Désolé d'avoir mal placé le topic ...

J'avais lu la FAQ, c'est comme ça que j'ai trouvé la méthode pour supprimer le marker mais je suis passé à coté de ce point setPosition je pense que c'est cette méthode qu'il me faut pour réaliser ce que je souhaite, je testerais ça ce soir.

En revanche j'ai pas trouvé comment limiter le marker à un seul ou supprimer tous les marker pas seulement le dernier, si tu as un lien ou me rediriger je suis preneur.

Merci d'avoir répondu

[NoSmoking]

En revanche j'ai pas trouvé comment limiter le marker à un seu

Il te faut simplement n'en créer qu'un et utiliser toujours le même

Code :

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

1
2
3
4
5
6
var oMarker = new google.maps.Marker({
    "position": {lat: 0, lng: 0},
    "map": null,
    "label": {text: "M", color: "limegreen"},
    "draggable": true
});

il existe mais n'est pas visible, absence de liaison à une map.

Ensuite sur le rightClick tu lui modifies ce que tu veux

Code :

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

1
2
3
4
5
google.maps.event.addListener(map, "rightclick", function(event) {
  oMarker.setPoistion(event.latLng);
  oMarker.setTitle("WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng()));
  oMarker.setMap(this);
});

[rlelamer]

Bonsoir NoSmoking,

Merci pour tes précieuses lumières 😉.

J'ai réussi, non sans mal, à créer le déplacement du marker.

Voici le code (complet avec console.log):

Code JS :

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
            var markerWpt = new google.maps.Marker({
                "position": {lat: 0, lng: 0},
                "map": null,
                "label": {text: "M", color: "limegreen"},
                "draggable": true
            });
 
            google.maps.event.addListener(map, "rightclick", function (event) {
                    markerWpt.setPosition(event.latLng);
                    markerWpt.setTitle("WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng()));
                    markerWpt.setMap(this);
                    console.log("event.latLng : " + event.latLng);
                    // event.latLng = (8.792808052344942, -31.983924125000044)
                    console.log("WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng()));
                    // WPT Marker : 8°47'34"N 31°59'02"W
            });
 
            google.maps.event.addListener(markerWpt, "dragend", function (event) {
                var newPosition = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
                markerWpt.setPosition(newPosition);
                markerWpt.setTitle("WPT Marker : " + formatPosition(newPosition));
                console.log("newPosition = " + newPosition);
                // newPosition = (-16.262129946242464, -25.480017875000044)
                console.log("WPT Marker : " + formatPosition(newPosition));
                // WPT Marker : NaN°NaN'NaN"N NaN°NaN'NaN"E
                console.log("WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng()));
                // WPT Marker : 16°15'43"S 25°28'48"W
            });
 
            google.maps.event.addListener(map, "click", function (event) {
                markerWpt.setMap(null);
                // --- supprimé et j'ai compris pourquoi ;)
                //markerWpt = null;
            });

Je suis dans l'incapacité d'exploiter la variable newPosition dans markerWpt.setTitle.
J'ai trouvé une solution pour contourner le problème mais j'aimerais comprendre pourquoi ces valeurs ne sont pas considérées comme des nombres (NaN) mais comme des chaines de caractères...
C'est normal ou le soucis se trouve derrière l'écran (moi) ?

[NoSmoking]

• première chose :

Code :

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

1
2
3
google.maps.event.addListener(markerWpt, "dragend", function (event) {
    var newPosition = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
    markerWpt.setPosition(newPosition);

inutile de (re)positionner le marqueur il l'est d'office.

• deuxième chose :

Code :

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

1
2
console.log("newPosition = " + newPosition);
// newPosition = (-16.262129946242464, -25.480017875000044)

lorsque tu fais un console.log avec un + cela affiche la représentation de ta variable sous forme de chaine et non la « vraie » nature de celle-ci. Il est préférable de mettre une virgule comme séparateur

Code :

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

console.log("newPosition = ", newPosition);  // avec une virgule

tu aurais eu une réponse du type

Code :

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

newPosition =  {lat: 48.37079001323774, lng: -3.9689453124999545}

ce qui est la représentation de l'objet ayant deux propriété lat et lng.

A voir : https://developer.mozilla.org/fr/doc.../Console#Usage

• troisième chose :
La syntaxe de ta fonction formatPosition doit ressembler à quelque chose comme

Code :

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

texte = function formatPosition( latitude: number, longitude: number)

alors quand tu écris formatPosition(newPosition), tu lui passes un objet, cela ne peut donc pas fonctionner.

[rlelamer]

• première chose :
inutile de (re)positionner le marqueur il l'est d'office.

Ok vu et mis en place, merci.

• deuxième chose :
lorsque tu fais un console.log avec un + cela affiche la représentation de ta variable sous forme de chaine et non la « vraie » nature de celle-ci. Il est préférable de mettre une virgule comme séparateur

Lu et relu, malgré ça je n'arrive pas à afficher

Code :

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

newPosition =  {lat: 48.37079001323774, lng: -3.9689453124999545}

à la place j'ai :

Code :

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

newPosition :  _.Q*{lat: ƒ, lng: ƒ}

J'ai appliqué ce que tu me dis mais je n'obtiens pas le même résultat que toi en console.
Ce qui n'empêche en rien le fonctionnement correct du code mais ça m'intéresse de comprendre pour que je puisse le réutiliser ultérieurement.

• troisième chose :
La syntaxe de ta fonction formatPosition doit ressembler à quelque chose comme

Oui la fonction est comme tu le dis

Code :

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

function formatPosition( latitude: number, longitude: number)

J'ai compris le pourquoi du comment.



Voici le code corrigé avec tes conseils:

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
            // markerWpt : rightlick => enable, click => disable
            var markerWpt = new google.maps.Marker({
                "position": {lat: 0, lng: 0},
                "map": null,
                "label": {text: "M", color: "limegreen"},
                "draggable": true
            });
 
            google.maps.event.addListener(map, "rightclick", function (event) {
                    markerWpt.setPosition(event.latLng);
                    markerWpt.setTitle("WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng()));
                    markerWpt.setMap(this);
            });
 
            google.maps.event.addListener(markerWpt, "dragend", function (event) {
                var newPosition = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
                markerWpt.setTitle("WPT Marker : " + formatPosition(newPosition.lat(), newPosition.lng()));
            });
 
            google.maps.event.addListener(map, "click", function (event) {
                markerWpt.setMap(null);
            });

[NoSmoking]

Lu et relu, malgré ça je n'arrive pas à afficher
(...)
J'ai appliqué ce que tu me dis mais je n'obtiens pas le même résultat que toi en console.
Ce qui n'empêche en rien le fonctionnement correct du code mais ça m'intéresse de comprendre pour que je puisse le réutiliser ultérieurement.

Effectivement, mais j'ai écris « tu aurais eu une réponse du type » juste pour montrer que c'est un objet que tu récupères.

Voici le code corrigé avec tes conseils:

tu peux faire plus direct dans ta fonction sur le dragEng

Code :

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

1
2
3
4
5
google.maps.event.addListener(markerWpt, "dragend", function (event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    markerWpt.setTitle("WPT Marker : " + formatPosition(lat, lng));
});

inutile de faire un aller retour pour obtenir la même chose

[rlelamer]

Bonjour NoSmoking ,
Merci encore une fois de tes précieux conseils.
Je les ai appliqué et donc la fonction définitive donne ceci :

Code JS :

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

1
2
3
4
            google.maps.event.addListener(markerWpt, "dragend", function (event) {
                var newPosition = {lat: event.latLng.lat(), lng: event.latLng.lng()};
                markerWpt.setTitle("WPT Marker : " + formatPosition(newPosition.lat, newPosition.lng));
            });

Avec le console.log(newPosition), j'obtiens bien les objets newPosition: {lat: xxx, lng: xxx}; de ton précédent post, c'était juste une erreur de syntaxe de ma part mais du coup j'ai mieux cerné la chose.



Le code complet pour la création d'un marqueur déplaçable via un clic droit et suppression de celui ci par un clic (gauche) est : (avec les fonctions existantes du code)

Code JS :

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
            var markerWpt = new google.maps.Marker({
                "position": {lat: 0, lng: 0},
                "map": null,
                "label": {text: "M", color: "limegreen"},
                "draggable": true
            });
 
            google.maps.event.addListener(map, "rightclick", function (event) {
                    markerWpt.setPosition(event.latLng);
                    markerWpt.setTitle("WPT Marker : " + formatPosition(event.latLng.lat(), event.latLng.lng()));
                    markerWpt.setMap(this);
            });
 
            google.maps.event.addListener(markerWpt, "dragend", function (event) {
                var newPosition = {lat: event.latLng.lat(), lng: event.latLng.lng()};
                markerWpt.setTitle("WPT Marker : " + formatPosition(newPosition.lat, newPosition.lng));
            });
 
            google.maps.event.addListener(map, "click", function (event) {
                markerWpt.setMap(null);
            });
 
            // formatPosition()
            function formatPosition(lat, lon) {
                var latDMS = toDMS(lat);
                var lonDMS = toDMS(lon);
                var latString = latDMS.g + "°" + pad0(latDMS.m) + "'" + pad0(latDMS.s) + '"';
                var lonString = lonDMS.g + "°" + pad0(lonDMS.m) + "'" + pad0(lonDMS.s) + '"';
                return latString + ((latDMS.u == 1) ? "N" : "S") + " " + lonString + ((lonDMS.u == 1) ? "E" : "W");
            }
 
            // toDMS()
            function toDMS(number) {
                var u = sign(number);
                number = Math.abs(number);
                var g = Math.floor(number);
                var frac = number - g;
                var m = Math.floor(frac * 60);
                frac = frac - m / 60;
                var s = Math.floor(frac * 3600);
                var cs = roundTo(360000 * (frac - s / 3600), 0);
                while (cs >= 100) {
                    cs = cs - 100;
                    s = s + 1;
                }
                return {
                    "u": u,
                    "g": g,
                    "m": m,
                    "s": s,
                    "cs": cs
                };
            }
 
            // pad0()
            function pad0(val) {
                if (val < 10) {
                    val = "0" + val;
                }
                return val;
            }

Ça pourra peut être servir à un noob comme moi
Je passe ce post en résolu, merci pour tes conseils, j'vais en abuser (si tu le veux bien) sur le marker en lui même sur un autre topic.