Google Maps API V3 InfoBox utilizzando jQuery fadeIn e fadeOut

Question

Ho cercato sul Web in alto e in basso e non sono stato in grado di trovare un tutorial o un esempio di utilizzo di jQuery per svanire un InfoBox/InfoWindow in Google Maps non il contenuto della casella effettiva /finestra. Ecco il mio codice, non sono sicuro di cosa sto sbagliando, ma anche qualcosa non sembra giusto.

google.maps.event.addListener(marker, 'mouseover', function() { 
    ib.setContent(html); 
    ib.open(map, marker); 
    ib.setValues({type: "point", id: 2}) 

    var idName = marker.get("id"); //I was trying to the id's of the elements here 
    var boxName = ib.get("id"); //to use in my jQuery 

    jQuery(idName).mouseover(function() { 
     jQuery(boxName).fadeIn('slow', function() { 
    // Animation complete 
    }); 
    }); 

}); 

Answer 1

In realtà è possibile fadein l'infobox, è necessario eseguire l'override della funzione di disegno nelle infobox.js file in questo modo

var oldDraw = ib.draw; 
ib.draw = function() { 
    oldDraw.apply(this); 
    jQuery(ib.div_).hide(); 
    jQuery(ib.div_).fadeIn('slow'); 
} 

Answer 2

Non penso sia possibile perché Google non fornisce un'opzione di animazione.

Provare a recuperare l'elemento Dom non funzionerà. La variabile ib è una classe google.maps.InfoWindow non un elemento DOM. Dal momento che non esiste un'interfaccia pubblica per ottenere l'elemento DOM per la finestra delle informazioni, non sarai in grado di accedervi da solo.

Se si utilizza console.log(ib.get("id")), l'ID non è definito.

Answer 3

Sto usando il marcatore libreria di utilità google con etichetta (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/docs/examples.html)

È facile usare jquery sulle etichette.

google.maps.event.addListener(marker, "mouseover", function (e) { 
    //console.log(this); this.label.labelDiv_.style.display = 'block'; 
    $(this.label.labelDiv_).fadeIn(); 
}); 

google.maps.event.addListener(marker, "mouseout", function (e) { 
    //this.label.labelDiv_.style.display = 'none'; 
    $(this.label.labelDiv_).fadeOut(); 
}); 

Answer 4

Se l'override del metodo draw e applicare il fade in, l'animazione verrà riprodotto anche se si trascina in giro o lo zoom in/out nella map.If non si vuole che ciò accada, si potrebbe applica il metodo fadeIn nel metodo del gestore domready. In questo caso la dissolvenza avrà effetto solo se apri la finestra iniziale.

google.maps.event.addListener(ib, 'domready', function() { 
      jQuery(ib).hide().fadeIn('slow'); 
}) 

;

Answer 5

ho provato qualcosa di simile per un sito web. ecco il mio codice (gm-api-v3)

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

function iwFadeIn() { 
    infowindow.open(map, marker); 
    var iw_container = $(".gm-style-iw").parent(); 
    iw_container.stop().hide(); 
    iw_container.fadeIn(1000); 
} 

Answer 6

L'effetto fadeOut può essere ottenuto aggiungendo classe e setTimeout. Lasciatemi spiegare.

Ad esempio:

$('.close-el') 
     .on('click', function(e) { 
      e.stopPropagation(); 
      $(infobox.div_).addClass('is-closing'); 
      setTimeout(function() { 
       infobox.close(); 
      }, 700); 
    }); 

quando si aggiunge classe CSS, e, dopo la fine della transizione css si chiude la finestra informazioni

e CSS (sass) (classe .infoBox è riservata)

.infoBox { 
    &.is-closing { 
     transition: transform 400ms, opacity 400ms; 

     transform: translate3d(0, 30px, 0); 
     opacity: 0; 
    } 
}