Автоматическое изменение размера gmaps Primefaces

У меня возникла небольшая проблема с использованием компонента gmap: когда я пытаюсь изменить размер компонента (т.е. установить высоту и ширину карты на 100% с помощью CSS), компонент сжимается, а сама карта становится невидимый. Но если установлены фиксированные высота/ширина, компонент работает нормально. Есть ли способ сделать автоматическое изменение размера для gmap?


google-maps autoresize css jakarta-ee primefaces
person user2120658    schedule 28.02.2013    source источник
comment
пожалуйста, поделитесь своим кодом.   -  person Ankit    schedule 28.02.2013

Ответы (2)


arrow_upward
0
arrow_downward

Просто быстрая мысль. Вы применяете размер к фактическому #map или #map_content (или чему-то еще), удерживающий div находится на вашей странице, а не к самой карте?

Если вы измеряете только карту, а не содержащий ее div, то 100% от 0 по-прежнему равно 0

person Rafe    schedule 28.02.2013

arrow_upward
0
arrow_downward

Проблема, вероятно, в стиле CSS. Если кто-то все еще заинтересован в решении этой проблемы, для меня работает приведенный ниже код:

CSS:

html, body, form {
    height: 100%;
    margin: 0;
}

.mapClass {
    width: 100%;
    height: 100%;

}

XHTML:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<h:head>
    <link href="./resources/css/style.css" rel="stylesheet" type="text/css" />
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</h:head>
<h:body>
    <h:form> 
        <p:gmap widgetVar="gmtls" center="41.381542, 2.122893" zoom="15" type="hybrid" styleClass="mapClass"/>
    </h:form>  
</h:body>
</html>
person gawi    schedule 13.05.2013