google maps v3 изменить размер информационного окна

Question

Я бы хотел установить размер информационного окна, чтобы он соответствовал содержимому внутри. Стандартное информационное окно слишком широкое, я попытался использовать maxWidth, но, похоже, оно не работает. Каков наилучший способ изменить размер информационного окна?

см. Код:

    window.setContent( inspStates[i].name+ "<br/>"+"total: "+inspStates[i].totalInsp+ "<br/>"+ info);

информация, которая будет отображаться в пузыре, выглядит следующим образом (\ n означает следующую строку)

NY \ ntotal 60 \ n2009: 10 \ n2010: 20 \ n2011: 30

Answer 1

То, что вы хотите сделать, - это заменить «стандартное» информационное окно Googlemaps своим собственным и поместить в него свой контент. Как только вы замените стандартное информационное окно GM, у вас будет много возможностей для работы. Что я сделал, это:

Добавьте новый идентификатор стиля с именем #infoWindow и установите его ширину.

#infoWindow {
    width: 150px;
}

Помимо любых функций в моем Javascript, я создаю новое информационное окно:

var infoWindow = new google.maps.InfoWindow();

Создайте новую переменную в функции, которая устанавливает информацию, отображаемую маркером (ами), и установите для ее значения значение:

var html = '<div id="infoWindow">';
html += 'NY<br />total 60<br />2009: 10<br />2010: 20<br />2011: 30';
html +='</div>';

Вызвать функцию createMarker, используя информацию о местоположении, которую вы бы создали в другом месте, и включить html var в качестве одного из аргументов:

var marker = createMarker(point,name,html);

Функция createMarker, которую вы объявите в другом месте, которая объединит всю информацию, отобразит маркер на вашей карте и отобразит приведенную выше информацию при ее нажатии:

function createMarker(latlng,name,html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: name
        });

    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(contentString); 
        infoWindow.open(map,marker);
        });
}

Answer 2

Точно так же все ясно, если они наткнуться на эту тему.

Все, что вам нужно сделать, это установить высоту и ширину контейнера в содержимом вашего информационного окна.

Вымне не нужно переопределять классы Google, и вам не нужно слишком усложнять это.

var contentString = '<div class="map-info-window">'+
  '<h1>My Info Window</h1>'+
  '<p>Hello World</p>'+
  '</div>';

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

В моем CSS есть следующее:

.map-info-window {
    width:200px;
    height:200px;
}

Вот и все.Это все, что вам нужно сделать, чтобы установить ширину информационного окна Google Maps.

Answer 3

У меня этот CSS работает нормально:

.gm-style-iw {
  width: 324px !important;
  height: 120px !important;
}

Answer 4

посмотрите на следующие ссылки и примеры API:

Примеры Google Map V3: https://developers.google.com/maps/documentation/javascript/examples/

Ссылка API Google Map V3: https://developers.google.com/maps/documentation/javascript/reference#MapOptions

Answer 5

Чтобы установить размер информационного окна пузыря на карте Google, достаточно добавить следующий CSS в ваш файл CSS:

.gmap-popup {
  max-width:204px;
  max-height:110px;
}

Адаптировано из этого обсуждения .

Answer 6

Ответы JFrancis верны, только не забудьте добавить «! Important» в ваш CSS, когда вы устанавливаете ширину! Это может выглядеть незначительно, но если вы этого не сделаете, ваш CSS просто будет перезаписан!

#infoWindow {
    width: 150px !important;
}