Sto utilizzando l'API di Google Maps e ho qualche problema su InfoWindow.Google Maps La larghezza di InfoWindow viene sovrascritta anche se impostata correttamente
Ecco un riassunto:
- Sto caricando il contenuto del InfoWindow quando l'utente fa clic su un marcatore
- Il contenuto è una vista parziale, caricati grazie ad un Ajax chiamano
- In. fatto callback, chiamo un metodo asincrono che inserirà i dati nel contenuto di InfoWindow. Devo farlo perché voglio che il contenuto principale di InfoWindow venga visualizzato immediatamente, mentre questa informazione "bonus" potrebbe essere visualizzata dopo qualche decimo di secondo.
Questo funziona perfettamente; ma ho una striscia bianca sulla destra del mio InfoWindow non riesco a rimuovere (vedi foto qui sotto)
Tuttavia, il carico di contenuti che è incluso in un <div> con un fisso width:
<div id="div-main-infoWindow">
<!-- All my content -->
</div>
e nel mio CSS, ho scritto:
#div-main-infoWindow {
width:342px !important;
}
il caricamento del InfoWindow, con maggiori dettagli, assomiglia a questo:
$.ajax({
url : "/my-url",
async : false,
contentType : "application/json; charset=utf-8",
dataType : "json",
type : "POST",
data : JSON.stringify(myModel)
}).done(function(response) {
MarkerContent = response.Content; //The HTML content to display
MyAsyncMethod().then(function(response) {
//do some formatting with response
return result; //result is just a small HTML string
}).done(function(result1, result2) {
//do some formatting with result1 and result2
$("#myNode").html(/*formatted result*/);
})
//info is a global variable defined as new google.maps.InfoWindow()
info.setOptions({
content: MarkerContent,
maxWidth: 342 //To be sure
});
info.open(map, marker);
});
});
Il contenuto è perfettamente OK, il problema è tutto di questa striscia bianca.
Guardando la mia console del browser (ho riprodotto in tutti i browser), posso vedere questo:
Come si può vedere, il mio <div> contenente tutti i miei dati caricati dalla mia chiamata AJAX va bene con le buone dimensioni (rettangolo verde, corrispondente alla zona grigia dello screenshot), MA le div precedenti (dalla stessa API di Google, nei rettangoli rossi) hanno una dimensione maggiore, da cui il problema è.
L'unico modo che ho trovato è in esecuzione questo script jQuery modificare la InfoWindow struttura interna:
$(".gm-style-iw").next().remove();
$(".gm-style-iw").prev().children().last().width(342);
$(".gm-style-iw").prev().children(":nth-child(2)").width(342);
$(".gm-style-iw").width(342);
$(".gm-style-iw").children().first().css("overflow", "hidden");
$(".gm-style-iw").children().first().children().first().css("overflow", "hidden");
$(".gm-style-iw").parent().width(342);
Nota: gm-style-iw è il nome della classe data dal Google del div che contiene tutti i contenuti del InfoWindow, quello si è fermato sullo screenshot qui sopra. Ho anche aggiungere questa regola nel mio CSS:
.gm-style-iw {
width: 342px !important; //also tried with 100% !important, not better
}
Funziona nella console, tuttavia, non ha alcun effetto quando scritto nel codice stesso, nel .done richiamata, o in caso in cui le domready Google Maps ..
Tuttavia, in questo caso tardo, se incapsulare lo script jQuery sopra in un setTimeout(), funziona !! Ho commentato il metodo asincrono, quindi non è questo che è colpevole, ma sembra che domready sia eseguito mentre il 100% di InfoWindow non è ancora visualizzato - che è contrary to the doc.
Ho anche provato a spostare il mio info.setOptions all'esterno del .done e richiamarlo dopo, senza effetto.
Quindi, come posso visualizzare una finestra di dialogo "normale" senza questa striscia bianca sulla destra?
Non voglio implementareo altra libreria personalizzata di InfoWindow. È un progetto personale e voglio capire perché e dove si trova il problema. E, naturalmente, trova una soluzione.
Grazie per il vostro aiuto!
Funziona con la mia sola volta, una al secondo scatto dello stesso o di un altro marker, si gies i valaues di default, il 'custom-IW' viene rimosso dopo il secondo clic – user1392021