Désactiver v-on:click / Google map


#1

Hello,

Je travaille actuellement sur un projet avec Vue et l’api de Google maps.
J’ai bind un click sur mon élément google-map qui ouvre un modal (pour ajouter des nouveaux markers). Le problème c’est que je n’arrive pas à désactivé l’event si l’utilisateur clique uniquement sur un marker déjà créé à l’intérieur de la map.

Mon template du composant:

<div class="col-9">
  <div class="google-map" :id="mapName" @click="showModal"></div>
</div>
<ModalComponent v-show="isModalVisible" @close="closeModal"/>

Les méthodes pour ouvrir / fermer le modal :

methods: {
  showModal() {
    this.isModalVisible = true;
  },
  closeModal() {
    this.isModalVisible = false;
  }
},

La fonction pour créer les markers (contenus dans un store) et affiché les infos dans une bulle :

mounted() {
//boucle sur le store
  store.restaurants.forEach((restau) => {
    var marker = new google.maps.Marker({
      position: restau.position,
      adresse: restau.adresse,
      nom: restau.nom,
      map: map,
      draggable: true,
      animation: google.maps.Animation.DROP
    });

    //ajoute le contenu dans l'infowindow
    var infoMarker = new google.maps.InfoWindow({
      content: "<h1>" + marker.nom + "</h1>" +
        "<p>" + marker.adresse + "</p>"
    });

    //ouvre l'infowindow au click sur marker
    google.maps.event.addListener(marker, 'click', function (event) {
      infoMarker.open(map, marker);
    });
  })
  
},

Ca ouvre l’infobulle, mais aussi le modal.

J’ai essayé d’insérer dans le listener du marker :
event.preventDefault() , event.stopPropagation() , d’appeler la méthode closeModal() , rien ne marche …

Merci d’avance pour votre aide !


#2

N’ayant pas bossé avec google maps et vue en même temps, je n’ai pas la réponse absolue mais j’ai qq suggestions.

  • Peut être que tu pourrais utiliser un package facilitant l’intégration (1er ex trouvé sur npm : https://www.npmjs.com/package/vue2-google-maps)

  • Un modifier self ? @click.self="showModal" (peu probable que ça marche)

  • Sinon en récupérant l’event, showModal(event), tu peux regarder ce que tu reçois, et trier suivant l’élément d’origine de l’event


#3

Hello matxx,

Merci pour ton aide ! J’ai utilisé le package vue2-google-maps et le problème a été réglé. (les markers étant dans un composant à part, il n’y a pas de conflit de listener).

Encore merci ! @++