Attacher un gestionnaire d’événement à un élément à l’intérieur de la bulle d’informations de Google Maps

J’ai une question concernant Google Maps et la gestion / écoute des événements.

En utilisant jQuery et google maps v3, je peux placer un marqueur de carte et un écouteur d’événements qui ouvre une infobulle lorsque l’utilisateur clique sur le marqueur. Ce que j’aimerais faire (mais je n’ai pas encore compris), c’est d’append un autre gestionnaire d’événements au contenu de la bulle d’informations. Par exemple, si l’utilisateur clique sur le marqueur de carte, ouvre la bulle d’informations (cette partie fonctionne), puis s’il clique sur quelque chose à l’intérieur de l’infobulle, fait autre chose. J’ai collé mon code ci-dessous, merci d’avance pour toute aide

function addMarker(data) { var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude); var title = data.title? data.title: ""; var icon = $('#siteUrl').val() + 'img/locate.png'; var bubbleContentSsortingng = "Get Details about " + title+ ""; myInfoBubble = new InfoBubble({ content: bubbleContentSsortingng, hideCloseButton: true, backgroundColor: '#004475', borderColor: '#004475' }); var myMarker = new google.maps.Marker({ position: myLatlng, map: map, title: title, icon: icon }); addListenerToMarker(myMarker, myInfoBubble); markerSet.push(myMarker, myInfoBubble); } function addListenerToMarker(marker, bubble){ console.log($(bubble.getContent()).find('.bubble-details-button')[0]); google.maps.event.addListener(marker, 'click', function() { if (!bubble.isOpen()) { google.maps.event.addListenerOnce(bubble, 'domready', function(){ console.log($(bubble.getContent()).find('.bubble-details-button')[0]); google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0], 'click', function(){ alert("hi"); }); }); bubble.open(map, marker); } }); } 

Vous essayez d’append un événement "click" sur un élément, qui n’est pas un DOM Element . $('.bubble-details-button') n’est pas un DOM Element (c’est un wrapper d’ DOM Element ), mais $('.bubble-details-button')[0] est.

D’autre part, lorsque vous essayez d’append un événement "click" , le contenu n’est pas encore créé. Vous pouvez travailler (par exemple, append des événements) avec des éléments de contenu, uniquement lorsqu’ils sont déjà créés. InfoBubble déclenchera l’événement "domready" lorsque son contenu sera créé.Vous devez donc le gérer:

  if (!bubble.isOpen()) { google.maps.event.addListenerOnce(bubble, 'domready', function(){ google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0], 'click', function(){ alert("hi"); }); }); bubble.open(map, mymarker); } 

Dans les scénarios où je dois faire ce que vous décrivez, j’inclus un appel de fonction JavaScript directement dans le contenu de InfoBubble. J’inclus souvent des liens hypertexte dans une info bulle, alors dans ce cas, je fais ce qui suit: 1 – Écrivez une fonction JavaScript pour gérer un clic sur un lien hypertexte. 2 – Créez le marqueur. 3 – Attachez un gestionnaire d’événements click au marqueur qui ouvre un InfoBubble. 4 – Définissez le contenu de InfoBubble de sorte que JavaScript incorporé directement dans le contenu d’InfoBubble soit configuré pour gérer l’événement click en appelant la fonction JavaScript définie à l’étape 1 – à peu près comme:

 "" + "" + displayTextContent + "" + ""