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.