gmap in tabview p:tab doesn't work primefaces jsf

0
votes

I have a dialog which has tabview with several tabs. In one of my tabs I have to show a gmap component. Whatever I have tried hasn't worked. Here is my snippet:

<p:dialog header="Proje Detayı" widgetVar="carDialog" resizable="false" id="display"  modal="true" style="font-size: 10px;font-weight: bold;" width="800" appendToBody="true" minHeight="1000">                          
                <p:commandButton value="Harita Lokasyonu" onclick="carDialog.hide();" oncomplete="mapperDijaloga.show()"/>
                <p:tabView id="tabView" cache="true" orientation="top" style="font-size: 10px;font-weight: bold;"> 
                    <p:tab id="tab1" title="Proje Bilgileri">
                        <h:panelGrid columns="2" cellpadding="2"> 
                            <h:outputText value="Proje Adı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.projectname}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="Proje Detayı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.projectexp}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="Proje Koordinatları: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.projectcoordlat}, #{projectsController.selectedP.projectcoordlon}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="İlçe: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.district}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="Sektör: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.sector}" style="font-weight: bold; font-size: 13px;"/>       

                            <h:outputText value="İş Durumu: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.workstatus}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Sorumlu Müd. Yard.: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.assistant}" style="font-weight: bold; font-size: 13px;"/>      

                            <h:outputText value="İhale Adı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.bidname}" style="font-weight: bold; font-size: 13px;"/>      

                            <h:outputText value="Firma: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.company}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="İhale Bedeli: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.biddcost}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="Ödenen Hak Ediş Tutarı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.costpaid}" style="font-weight: bold; font-size: 13px;"/>   

                            <h:outputText value="SÜRE BİLGİSİ" style="font-weight: bold; font-size: 13px; float: right; font-style: italic"/><p:separator />

                            <h:outputText value="Başlangıç Tarihi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.startdate}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="İşin Süresi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.processtime}" style="font-weight: bold; font-size: 13px;"/>     

                            <h:outputText value="Bitiş Tarihi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.enddate}" style="font-weight: bold; font-size: 13px;"/> 

                        </h:panelGrid>
                    </p:tab>  

                    <p:tab id="tab2" title="Teknik Bilgiler">  

                        <h:panelGrid columns="2" cellpadding="3"> 

                            <h:outputText value="Ada/Parsel: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.parcel}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Plan Durumu: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.planstatus}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Yolun Genişliği: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.roadwidth}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Yolun Uzunluğu: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.roadlength}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Toplam Alan: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.totalarea}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="İlave Bilgi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.extrainfo}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Teklif Birim Fiyat: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.unitoffer}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Yapım Yaklaşık Maliyeti: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.approxcost}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Proje Maliyeti: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.projectcost}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Dosya Kodu: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.filenu}" style="font-weight: bold; font-size: 13px;"/> 

                        </h:panelGrid>
                    </p:tab>  

                    <p:tab id="tab3" title="Proje Teşkilatı">  

                        <h:panelGrid columns="2" cellpadding="3">

                            <h:outputText value="Şef: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.chef}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Mimar: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.arch}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="İnşaat Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.streng}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Peyzaj Mimarı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.landarch}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Elektrik Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.eleceng}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Jeoloji Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.geoeng}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Makine Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.macheng}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Harita Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.mapeng}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Şehir Plancısı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.planeng}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="İHALE ÖNCESİ TAKİP" style="font-weight: bold; font-size: 13px; float: right; font-style: italic"/><p:separator />

                            <h:outputText value="Sorumlu Müd. Yard.: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.assistantbefore}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Sorumlu Müh./Mimar: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.engarch}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="UYGULAMACI KONTROL TEŞKİLATI" style="font-weight: bold; font-size: 13px; float: right; font-style: italic"/><p:separator />

                            <h:outputText value="Müdür Yard.: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.mdyard}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Mimar: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.mim}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="İnşaat Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.ins}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Peyzaj Mimarı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.peyz}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Elektrik Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.elek}" style="font-weight: bold; font-size: 13px;"/> 

                        </h:panelGrid>

                    </p:tab>  

                    <p:tab id="tab4" title="Firma Bilgisi">  
                        <h:panelGrid columns="2" cellpadding="3">

                            <h:outputText value="Yetkili Kişi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.compres}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Görevi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.compresjob}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Telefon: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.comptel}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Adres: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.compaddress}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="E-Posta: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.compmail}" style="font-weight: bold; font-size: 13px;"/>     
                        </h:panelGrid>
                    </p:tab>  
                    <p:tab id="map" title="Lokasyon">                            
                        <br />
                        <h:form>
                            <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" />
                            <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:600px;height:400px" widgetVar="mymap"/>  
                        </h:form>      
                    </p:tab>
                </p:tabView>
            </p:dialog>

In the last tab the problem occurs:

                        <p:tab id="map" title="Lokasyon">                            
                        <br />
                        <h:form>
                            <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" />
                            <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:600px;height:400px" widgetVar="mymap"/>  
                        </h:form>      
                    </p:tab>

I have tried with changing the z-index but it didn't work either. How to overcome the problem? Thanks in advance.

2
jsfprimefacesfacelets

2 Answers

0
votes

I think you need to repaint the MAP widget when its tab is selected.

The following works for me:

  • Name your map form so its addressable (e.g. 'myMapForm')
  • Capture the ajax tabChange event to repaint the map.

Try <p:ajax event="tabChange" update=":myMapForm:map:myMap"/>

Cheers.

0
votes

This solution creates some unpleasant blinking caused i think by some double rendering of the map, once it's been loaded. A better solution (at least at first sight) seems to be using the attribyte dynamic="true" on the tabView container, so you get something like

<p:tabView dynamic="true">
  <p:tab id="xxx" title="xxx">
      .
  </p:tab>
  <p:tab id="yyy" title="yyy">
      <p:gmap ............ />
  </p:tab>
</p:tabView>