Информационное окно неправильного размера в Google Maps API v3 Служба просмотра улиц

Question

Настройка: На той же странице (внутри одного и того же холста карты) у меня есть 2 информационных окна. CSS для обоих из них один и тот же. Содержимое очень похоже. Первоначально панель панорамирования открывается с открытым информационным окном. Кнопка внутри информационного окна используется для переключения между обычной картой и просмотром улиц. На карте появилось второе информационное окно с кнопкой, чтобы вернуться к просмотру улиц.

Проблема: Одно информационное окно изменяет размер, чтобы соответствовать содержимому, а другое - нет, поэтому оно отображает полосы прокрутки. Единственное различие, которое я вижу, - это то, что он находится на обычной старой дорожной карте, а другой - на панорамной панораме.

Что я пробовал: У меня maxWidth для обоих инфо-окон, установленных на 500 (смехотворно широкий), и ширины и высоты набора для внутреннего div информационного окна в CSS.

Кодекс: Вот CSS:

#map-canvas{ 
    height: 600px; 
    width: 1000px; 
} 
#map-canvas .info-window { 
    width: 250px; 
    height: 230px; 
} 

Полный JS долго и jsfiddle.

Демо:http://jsfiddle.net/rkXuk/1/

full screen demo

Призыв о помощи: Что здесь происходит? Почему они меняются по-разному и как я могу это исправить?

Answer 1

Использовать inline css.

Вместо

.info-window { 
    width: 250px; 
    height: 230px; 
} 

Использование:

// map info window 
var contentString = '<div style="width:250px; height:230px;" class="info-window">' + 
    '<h3>Hi, we\'re Cuberis</h3>' + 
    '<table border="0" cellpadding="0" cellspacing="0" class="contact">' + 
    '<tr>' + 
    '<th scope="row">Email:</th>' + 
    '<td>info@cuberis.com</td>' + 
    '</tr>' + 
    '<tr>' + 
    '<th scope="row">Phone:</th>' + 
    '<td>919.443.2254</td>' + 
    '</tr>' + 
    '<tr>' + 
    '<th scope="row">Office:</th>' + 
    '<td>Golden Belt - Building 2<br />' + 
    '807 E. Main Street<br />' + 
    'Suite 2-210<br />' + 
    'Durham, NC 27701</td>' + 
    '</tr>' + 
    '</table>' + 
    '<div class="contact">' + 
    '<input type="button" class="button" value="See inside our office" onclick="toggleStreetView();"></input>' + 
    '</div>'; 

И:

// street view info window 
var contentString2 = '<div style="width:250px; height:230px;" class="info-window">' + 
    '<h3>Hi, we\'re Cuberis</h3>' + 
    '<table border="0" cellpadding="0" cellspacing="0" class="contact">' + 
    '<tr>' + 
    '<th scope="row">Email:</th>' + 
    '<td>info@cuberis.com</td>' + 
    '</tr>' + 
    '<tr>' + 
    '<th scope="row">Phone:</th>' + 
    '<td>919.443.2254</td>' + 
    '</tr>' + 
    '<tr>' + 
    '<th scope="row">Office:</th>' + 
    '<td>Golden Belt - Building 2<br />' + 
    '807 E. Main Street<br />' + 
    'Suite 2-210<br />' + 
    'Durham, NC 27701</td>' + 
    '</tr>' + 
    '</table>' + 
    '<div class="contact">' + 
    '<input type="button" class="button" value="Check us out on the map" onclick="toggleStreetView();"></input>' + 
    '</div>';