2014-12-24 2 views
0

Содержимое InfoWindow, которое я намерен показать, - 840px x 660px. Установив свойство MaxWidth в конструктореУстановите google maps InfoWindow на ширину более 700 пикселей.

(ex. new google.maps.InfoWindow({ content: some_text, maxWidth: 840});) 

Он устанавливает окно шириной 707 пикселей. Мне удалось перезаписать классы для .gm-style-iw и для #content (мой контент находится в div с правильным набором ширины и высоты), но есть теги div между #content тегом div и тегом div с классом .gm-style-iw с шириной максимум 707px и высота max 645px (эти значения я нашел в «Проверка элемента» в Chrome).

Если удалить весь стиль (в Chrome) Проверьте элемент ведущего тега DIV (который содержит, по меньшей мере, 7-8 Дива суб-тег и среди них Div тега с классом .gm-style-iw и #content сНом тегом) и все вложенные тегами которые не имеют указанных имен классов или указанного идентификатора, тогда окно кажется прекрасным, НО мне не удается установить ширину и высоту в классе или javascript ... может кто-нибудь помочь мне с этим?

+0

Если вы все еще заинтересованы в решении, проверить этот ответ: http://stackoverflow.com/questions/28589361/google-maps-infowindow-width-is-overwritten-even-when-set-correctly – yezior

ответ

2

не проходят 840px значение прохода, как 840 .if вы используете 840px это вы будете получать ошибки как:

identifier starts immediately after numeric literal 

вы должны использовать это:

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

увидеть небольшую демо:

function initialize() { 
 
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
 
    var mapOptions = { 
 
    zoom: 4, 
 
    center: myLatlng 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    var contentString = '<div id="content">'+ 
 
     '<div id="siteNotice">'+ 
 
     '</div>'+ 
 
     '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
 
     '<div id="bodyContent">'+ 
 
     '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
 
     'sandstone rock formation in the southern part of the '+ 
 
     'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+ 
 
     'south west of the nearest large town, Alice Springs; 450&#160;km '+ 
 
     '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+ 
 
     'features of the Uluru - Kata Tjuta National Park. Uluru is '+ 
 
     'sacred to the Pitjantjatjara and Yankunytjatjara, the '+ 
 
     'Aboriginal people of the area. It has many springs, waterholes, '+ 
 
     'rock caves and ancient paintings. Uluru is listed as a World '+ 
 
     'Heritage Site.</p>'+ 
 
     '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+ 
 
     'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+ 
 
     '(last visited June 22, 2009).</p>'+ 
 
     '</div>'+ 
 
     '</div>'; 
 

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

 
    var marker = new google.maps.Marker({ 
 
     position: myLatlng, 
 
     map: map, 
 
     title: 'Uluru (Ayers Rock)' 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infowindow.open(map,marker); 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas { 
 
     height: 100%; 
 
     margin: 0px; 
 
     padding: 0px 
 
     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=drawing,geometry"></script> 
 
<div id="map-canvas"></div>

+0

Это не решение. Пожалуйста, «Запустите код, отрезанный» и перейдите в «Inspect Element», и вы увидите, что ведущий div имеет ширину 707px ... Я не могу загрузить экран печати, чтобы показать –

+0

попробуйте использовать это, чтобы установить новую ширину: \t $ («div . .gm стиле ") найти (. '*') каждая (функция() { \t \t console.log ($ (это) .width()); \t \t \t $ (это) .width (840) \t}); –

+0

Нет, это не решение. Я также пробовал подобные подходы, но все же не уместно и чистое решение ... –

Смежные вопросы