Reset enventListener google map

**luangue** · 24/03/2017, 18h35

Bonjour à tous,

voici un lien avec ce que je souhaite réalisé avec l'api google map: https://jsfiddle.net/r86344jy/
le but est de détecter le click pour ouvrir une modal puis de rajouter un marker lorsque l'on appuie sur le submit. Si l'ont quitte la modale le marker ne doit pas être rajouté.

cela fonctionne, le problème est que tous les click réalisés sont enregistrés. Ce qui fait que lorsque je j'annule un click pour en rajouter un autre et que je valide, cela me rajoute deux marker.

j'ai tenté d'utiliser la fonction clearListeners() lorsque la modal se ferme on('hidden.bs.modal', function () { }) mais cela désactive le addListener().
https://developers.google.com/maps/d...t/events?hl=fr

je ne comprends pas comment réinitialiser les positions à chaque fois que l'on quitte la modale

merci d'avance pour votre aide.

**NoSmoking** · 25/03/2017, 12h21

Bonjour,
ton soucis vient du fait que tu rajoutes un événement à chaque clic sur la map, à l'ouverture de ta « modal ».

Je procéderais différemment en ajoutant des champs cachés à ton formulaire pour récupérer la position du clic sur la map

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<form id="form">
    <!-- ajout des champs pour stockage info -->
    <input type="hidden" name="lat"><input type="hidden" name="lng">
    <div class="form-group">
        <textarea class="form-control" rows="3" placeholder="Description" name="description"></textarea>
    </div>
    <div class="form-group">
        <label for="exampleInputFile">Ajouter une image</label>
        <input type="file" id="exampleInputFile">
    </div>
    <button type="submit" class="btn btn-default">Submit</button type="submit">
</form>

Je définirais la fonction au clic sur la map comme suit

Code :

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

1
2
3
4
5
6
7
function handleClickMap(e) {
  // ici on stocke les data
  $('[name=lat]').val(e.latLng.lat());
  $('[name=lng]').val(e.latLng.lng());
  // et on affiche la modal
  $('#myModal').modal('toggle');
}

et celle sur le formulaire ainsi

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function handleSubmitForm(e) {
  e.preventDefault();
  // récup. de la position
  var pos = {
    'lat': $('[name=lat]').val() * 1,
    'lng': $('[name=lng]').val() * 1
  };
  placeMarkerAndPanTo(pos, oMap);
  $('#myModal').modal('hide');
  // pour voir l'envoi  
  console.log($(this).serialize());
}

En réorganisant légèrement le code cela pourrait donner cela

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
var oMap;
function handleSubmitForm(e) {
  e.preventDefault();
  // récup. de la position
  var pos = {
    'lat': $('[name=lat]').val() * 1,
    'lng': $('[name=lng]').val() * 1
  };
  placeMarkerAndPanTo(pos, oMap);
  $('#myModal').modal('hide');
  // pour voir l'envoi  
  console.log($(this).serialize());
}
function handleClickMap(e) {
  // ici on stocke les data
  $('[name=lat]').val(e.latLng.lat());
  $('[name=lng]').val(e.latLng.lng());
  // et on affiche la modal
  $('#myModal').modal('toggle');
}
function initMap() {
  // Create a map object and specify the DOM element for display.
  oMap = new google.maps.Map(document.getElementById('map'), {
    'center': { 'lat': 46.8, 'lng': 1.7},
    'scrollwheel': false,
    'zoom': 6
  });
  //Geolocalisation
  navigator.geolocation.getCurrentPosition(function (position) {
    var pos = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    oMap.setCenter(pos);
    oMap.setZoom(13);
  });
  // on ne défini l'action qu'une fois donc hors de la fonction
  $('#form').on('submit', handleSubmitForm);
  // action au click sur la carte
  oMap.addListener('click', handleClickMap);
}
function placeMarkerAndPanTo(latLng, map) {
  var marker = new google.maps.Marker({
    'position': latLng,
    'map': map
  });
  $('#myModal').modal('hide');
}
initMap();