Google Maps API v3 Cliquez sur les événements qui ne sont pas transmis par des superpositions personnalisées

Question

J'ai utilisé InfoBox pour dessiner des superpositions personnalisées sur mon GoogleMap. En bref, je charge à partir de longs lat XML, dessine des épingles sur la carte et affiche un infowindow personnalisé. Tout va bien, mais je voulais utiliser mon propre contenu à la place des pins pour les marqueurs (petits aperçus du contenu), donc je les ai créés en utilisant InfoBox comme une étiquette de carte. Puis à leur tour en cliquant sur eux, j'ouvre une InfoBox comme un remplacement InfoWindow. Le problème est, pour la vie de moi, je ne peux pas obtenir un écouteur d'événement pour passer le clic sur les remplacements de broches. L'écouteur d'événement ne vient ramassez pas ..

// This works perfectly when var marker = new google.maps.Marker({ 
    // but registers nothing when var marker = new InfoBox(flookLabel); 

    google.maps.event.addListener(marker, 'click', function() {  
    ib.close(); 
    ib = new InfoBox(cardDisplay);     
    ib.open(flookMap, marker); 
    alert('yes'); 

    }); 

Pour tout voir en contexte, je mettre dans ma fonction entière ici:

var flookMap = { 
    bounds: null, 
    map: null 
    }; 
    var geocoder; 
    var centerChangedLast; 
    var reverseGeocodedLast; 
    var currentReverseGeocodeResponse; 
    blockLocate = false; 
    var markersArray = []; 
    var point; 
    ib = new InfoBox(); 


    // get the results XML back and draw it on the map 
    loadCards = function(filename) { 
     setStatus("Waiting for response"); 
     $.get(filename, function(xml){ 
     var results = $(xml).find("card").length; 
     setStatus("Server gave me " +results+ " cards"); 
     if (results == 0){ 
      setStatus("I got no cards for you dude"); 
      } 
     else { 
     $(xml).find("card").each(function(){ 
      var name = $(this).find('name').text(); 
      var address = $(this).find('placename').text(); 
      var imageUrl = $(this).find('imageUrl').text(); 
      // create a new LatLng point for the marker 
      var lat = $(this).find('lat').text(); 
      var lng = $(this).find('lng').text(); 
      var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng)); 

      // extend the bounds to include the new point 
      //flookMap.fitBounds(results[0].geometry.viewport); 
      flookMap.bounds.extend(point); 


    var labelText = "test"; 

    var flookLabel = { 
        content: labelText 
        ,boxStyle: { 
         border: "5px solid black" 
         ,textAlign: "center" 
         ,fontSize: "8pt" 
         ,width: "50px" 
        } 
        ,disableAutoPan: true 
        ,pixelOffset: new google.maps.Size(-25, 0)      
        ,position: point 
        ,closeBoxURL: "" 
        ,isHidden: false 
        ,pane: "mapPane" 
        ,enableEventPropagation: true 
      }; 

      var marker = new InfoBox(flookLabel);   
      marker.open(flookMap); 
      markersArray.push(marker); 


    /*  add the marker itself 
      var marker = new google.maps.Marker({ 
      position: point, 
      map: flookMap 
      }); 
      setStatus('Drawing pin' + point); 
      markersArray.push(marker); 
    */ 
      // create the tooltip and its text 
      var boxText = document.createElement("div"); 
      boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: rgba(0,0,0,0.5); padding: 5px; -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,0.2); -webkit-border-radius: 8px;"; 
      boxText.innerHTML = '<p>'+name+'</p><br />'+address+'<br /><img width="460" height="300" src="'+imageUrl+'" />'; 
      var cardDisplay = { 
        content: boxText 
        ,disableAutoPan: false 
        ,maxWidth: 0 
        ,pixelOffset: new google.maps.Size(-250, -400)      
        ,zIndex: null 
        ,boxStyle: { 
         // background: "url('http://www.garylittle.ca/map/artwork/tipbox.gif') no-repeat" 
         opacity: 1 
         ,width: "500px" 
         ,height: "400px" 
        } 
        ,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 
      }; 

      // add a listener to open the tooltip when a user clicks on one of the markers 
      google.maps.event.addListener(marker, 'click', function() {  
      ib.close(); 
      ib = new InfoBox(cardDisplay);     
      ib.open(flookMap, marker); 
      alert('yes'); 

      }); 
     }); 

     // Fit the map around the markers we added: 
     flookMap.fitBounds(flookMap.bounds); 
     setStatus("Zooming map to new bounds:" +flookMap.bounds); 

     } 
     }); 
    } 

Answer 1

Je pense que j'eu un problème similaire. AFAIR Je l'ai étamées comme ceci:

• la fonction d'écouteur d'événement a été encapsuler une autre fonction:
• Infobox a été initialisé, mais non représentée,

que lorsque le marqueur est créé, je suis l'ajout de l'auditeur:

google.maps.event.addListener(marker, "click", function(e){ 
    loadTooltipContent(id, marker); 
}); 

et que:

loadTooltipContent = function(id, marker){ 
    infobox.setContent('<div>Loading...</div>'); 
    infobox.open(map,marker); 
    // than the ajax request... etc. 
}