Utilisation de l'événement closeeclick dans l'infobox

Question

Je suis fatiguée de chercher comment appliquer fermer le clic événement en infobox(google maps) . J'ai essayé presque tous les scénarios auxquels je peux penser, mais sans succès. Je vous prie de bien vouloir m'aider

Voici mon code pour l'ajout d'un marqueur :-)

var ib_click = new InfoBox();
ib_click.isOpen = false;
var toShowHover = true;

function add_marker(lat,lng,icn,title,box_html) {
  var mapcode,myOptions;
  var marker = new google.maps.Marker({
    /*marker settings*/
  });   

  myOptions = {
    /*option of infobox*/
  };
  marker.ibOptions = myOptions;
  google.maps.event.addListener(marker, 'click', function() {
    mapcode = /* html for showing box */
    myOptions.content = mapcode;
    myOptions.boxStyle.width = "235px";
    ib_click.setOptions(marker.ibOptions);
    ib_click.open(map, marker);
    ib_click.isOpen = true;

    toShowHover = false;
  });   
  google.maps.event.addListener(marker, 'mouseover', function() {
    //this is fired
    var mapcode = /*html for showing hover*/;
    //ib_click.open(map, marker);
    myOptions.content = mapcode;
    myOptions.boxStyle.width = "205px";
    ib_click.setOptions(marker.ibOptions);
    ib_click.open(map, marker);
    // ib_click.isOpen = true;
  });   
  google.maps.event.addListener(marker, 'mouseout', function() {
    //alert('mouse out');//this is fired
    //toShowHover = true;
  });

  google.maps.event.addListener(ib_click, 'closeclick', function(){
    //how to use closeclick 
    //showing error here
    alert('closed');
  });
  return marker;
}

Merci de nous éclairer Ankur ;(

Answer 1

Essayez d'ajouter l'écouteur pour le clic de fermeture juste après l'ouverture de la boîte, avant la balise }) ;. vous devez inclure l'écouteur pour chaque boîte, lorsque la boîte est créée.

Voici mon code qui utilise l'écouteur de fermeture.

function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
icon: "/mapping/redmarker1.png",
title:markerClickGrid
});
markers.push(marker);
    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: gray; padding: 5px; color:white;";
    boxText.innerHTML = marker.title;
    var myOptions = {
     content: boxText
    ,disableAutoPan: false
    ,maxWidth: 0
    ,pixelOffset: new google.maps.Size(10, -50)
    ,zIndex: null
    ,boxStyle: { 
    background: "url('tipbox.gif') no-repeat"
    ,opacity: 0.75
    ,width: "140px"
    }
    ,closeBoxMargin: "10px 2px 2px 2px"
    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
    ,infoBoxClearance: new google.maps.Size(1, 1)
    ,isHidden: false
    ,pane: "floatPane"
    ,enableEventPropagation: false
    };
    var ib = new InfoBox(myOptions);
    ib.open(map,marker);
    preventmarkermouseoutibclose = true;

google.maps.event.addListener(ib, 'closeclick', function(event) {
    preventmarkermouseoutibclose = false;
    document.getElementById('debugtext').value = "ib close click detected";
});
google.maps.event.addListener(marker, 'click', function() {
    ib.open(map,marker);
    preventmarkermouseoutibclose = true;
    document.getElementById('debugtext').value = "ib open detected";
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
    ib.close(map,marker);
    marker.setMap(null);
    preventmarkermouseoutibclose = false;
    document.getElementById('debugtext').value = "ib close on rightclick detected";
});
google.maps.event.addListener(marker, "mouseover", function() {
    document.getElementById('debugtext').value = "marker mouseover detected";
    ib.open(map,marker);
});
google.maps.event.addListener(marker, "mouseout", function() {
    if(preventmarkermouseoutibclose==true){
    }
    else if(preventmarkermouseoutibclose==false){
    ib.close(map,marker);
    }
});

ib est le nom de mon infobox. Chaque fois qu'une infobox ib est ouverte, un listener est ajouté, à la recherche de "closeclick".

Cela fonctionne pour moi. J'espère que cela fonctionnera pour vous.