Я использую Google Maps API, и у меня возникли проблемы сInfoWindow.

Вот резюме:

Я загружаю содержимое InfoWindow, когда пользователь нажимает на маркерСодержимое является частичным представлением, загруженным благодаря вызову AjaxВ обратном вызове .done я вызываю асинхронный метод, который вставляет данные в содержимое InfoWindow. Мне нужно сделать это, потому что я хочу, чтобы основное содержимое InfoWindow отображалось немедленно, тогда как эта «бонусная» информация могла отображаться через несколько десятых секунды.

Это прекрасно работает; но у меня справа от окна InfoWindow есть белая полоса, которую я не могу удалить (см. рисунок ниже)

Тем не менее, загружаемый контент включен в<div> с фиксированнымwidth :

<div id="div-main-infoWindow">
    <!-- All my content -->
</div>

И в моем CSS я написал:

#div-main-infoWindow {
    width:342px !important;
}

Загрузка InfoWindow с более подробной информацией выглядит следующим образом:

$.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);
        });
});

Содержание в порядке, проблема в этой белой полосе.

Глядя на консоль браузера (я воспроизвел ее во ВСЕХ браузерах), я вижу это:

Как вы можете видеть, мой<div> содержит все мои данные, загруженные из моего вызова ajax, в порядке с хорошим размером (зеленый прямоугольник, соответствующий серой зоне на скриншоте), НО вышеупомянутые div (из самого Google API, в красные прямоугольники) имеют больший размер, от в чем проблема.

Единственный способ, который я нашел, - запустить этот скрипт jQuery, модифицирующий внутреннюю структуру InfoWindow:

$(".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);

Заметка : gm-style-iw это имя класса, данное Google для div, содержащего все содержимое InfoWindow, которое показано на снимке экрана выше. Я также добавляю это правило в мой CSS:

.gm-style-iw {
    width: 342px !important; //also tried with 100% !important, not better
} 

Он работает в консоли, однако не имеет никакого эффекта при написании в самом коде, в.done обратный вызов или вdomready Событие Google Maps ...
Однако в этом позднем случае, если я инкапсулирую вышеупомянутый скрипт jQuery вsetTimeout(), оно работает !! Я прокомментировал асинхронный метод, так что виноват не этот, но кажетсяdomready выполняется, тогда как 100% InfoWindow все еще не отображается - чтовопреки доку.

Я также пытался переместить мойinfo.setOptions вне.done перезвонить и поставить его после, никакого эффекта.

Итак, как я могу отобразить «нормальное» информационное окно без этой белой полосы справа?
Я не хочу реализовыватьInfoBubble или другую пользовательскую библиотеку InfoWindow. Это личный проект, и я хочу понять, почему и где проблема. И конечно, найти решение.

Спасибо за помощь !