Gmap disappears when i change the tabView

[asaadbenkaddour]

hi guys,
i have a page in which i wish to display a gmap inside each tab of the tabView, when displaying the first tab the gmap works fine but it disappears on the second tab
can anyone out there help me please

[Miguel Cubells]

Could you share some code snippets? How are you using the TabView and the GMap?
It's hard to see what could be your problem, without more information...

[yem583]

I'm having the same issue. Gmap is working fine when rendered outside of the tab control (second tab in my case), but same markup in the tab control not working.

gmap working in this case

<h4>Brewery Details</h4>
<p-tabView>
<p-tabPanel header="Brewery Details">
<div id="brewery-detail" class="ui-grid ui-grid-responsive ui-grid-pad">
<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Id</label>
</div>
<div class="ui-grid-col-8">
<input class="ui-widget ui-inputtext" disabled type="text" pInputText [(ngModel)]="breweryViewModel.brewery.breweryId"/>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Name</label>
</div>
<div class="ui-grid-col-8">
<input class="ui-widget ui-inputtext" type="text" pInputText [(ngModel)]="breweryViewModel.brewery.name"/>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Address</label>
</div>
<div class="ui-grid-col-8">
<input class="ui-widget ui-inputtext" type="text" pInputText [(ngModel)]="breweryViewModel.brewery.address"/>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>City</label>
</div>
<div class="ui-grid-col-8">
<input class="ui-widget ui-inputtext" type="text" pInputText [(ngModel)]="breweryViewModel.brewery.city"/>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>State</label>
</div>
<div class="ui-grid-col-8">
<p-dropdown class="ui-widget" [options]="states" (onChange)="onStateChanged($event)" [(ngModel)]="selectedState"></p-dropdown>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Zip</label>
</div>
<div class="ui-grid-col-8">
<p-inputMask class="ui-widget" mask="99999-9999" [(ngModel)]="breweryViewModel.brewery.zip"></p-inputMask>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Phone</label>
</div>
<div class="ui-grid-col-8">
<p-inputMask class="ui-widget" mask="(999) 999-9999" [(ngModel)]="breweryViewModel.brewery.phone"></p-inputMask>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Website</label>
</div>
<div class="ui-grid-col-8">
<a target="_blank" href="http://{{breweryViewModel.brewery.websiteUrl}}">{{breweryViewModel.brewery.websiteUrl}}</a>

</div>
</div>
</div>
</p-tabPanel>
<p-tabPanel header="Map">

</p-tabPanel>
<p-tabPanel header="Google Places">
<div class="ui-grid ui-grid-responsive ui-grid-pad">

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Google Places Rating</label>
</div>
<div class="ui-grid-col-8">
<p-rating readonly="true" [(ngModel)]="breweryViewModel.rating"></p-rating>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-12">
<p-galleria [images]="images" panelHeight="400" showCaption="false"></p-galleria>
</div>
</div>
</div>
</p-tabPanel>
</p-tabView>
<div class="ui-grid ui-grid-responsive ui-grid-pad">


<div class="ui-grid-row">
<div class="ui-grid-col-4">
<p-gmap #gmap [options]="options" [style]="{'width':'100%','height':'320px'}" ></p-gmap>
</div>
</div>

</div>

GMap not working in this case

<h4>Brewery Details</h4>
<p-tabView>
<p-tabPanel header="Brewery Details">
<div id="brewery-detail" class="ui-grid ui-grid-responsive ui-grid-pad">
<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Id</label>
</div>
<div class="ui-grid-col-8">
<input class="ui-widget ui-inputtext" disabled type="text" pInputText [(ngModel)]="breweryViewModel.brewery.breweryId"/>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Name</label>
</div>
<div class="ui-grid-col-8">
<input class="ui-widget ui-inputtext" type="text" pInputText [(ngModel)]="breweryViewModel.brewery.name"/>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Address</label>
</div>
<div class="ui-grid-col-8">
<input class="ui-widget ui-inputtext" type="text" pInputText [(ngModel)]="breweryViewModel.brewery.address"/>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>City</label>
</div>
<div class="ui-grid-col-8">
<input class="ui-widget ui-inputtext" type="text" pInputText [(ngModel)]="breweryViewModel.brewery.city"/>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>State</label>
</div>
<div class="ui-grid-col-8">
<p-dropdown class="ui-widget" [options]="states" (onChange)="onStateChanged($event)" [(ngModel)]="selectedState"></p-dropdown>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Zip</label>
</div>
<div class="ui-grid-col-8">
<p-inputMask class="ui-widget" mask="99999-9999" [(ngModel)]="breweryViewModel.brewery.zip"></p-inputMask>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Phone</label>
</div>
<div class="ui-grid-col-8">
<p-inputMask class="ui-widget" mask="(999) 999-9999" [(ngModel)]="breweryViewModel.brewery.phone"></p-inputMask>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Website</label>
</div>
<div class="ui-grid-col-8">
<a target="_blank" href="http://{{breweryViewModel.brewery.websiteUrl}}">{{breweryViewModel.brewery.websiteUrl}}</a>

</div>
</div>
</div>
</p-tabPanel>
<p-tabPanel header="Map">
<div class="ui-grid ui-grid-responsive ui-grid-pad">


<div class="ui-grid-row">
<div class="ui-grid-col-4">
<p-gmap #gmap [options]="options" [style]="{'width':'100%','height':'320px'}" ></p-gmap>
</div>
</div>

</div>
</p-tabPanel>
<p-tabPanel header="Google Places">
<div class="ui-grid ui-grid-responsive ui-grid-pad">

<div class="ui-grid-row">
<div class="ui-grid-col-4">
<label>Google Places Rating</label>
</div>
<div class="ui-grid-col-8">
<p-rating readonly="true" [(ngModel)]="breweryViewModel.rating"></p-rating>
</div>
</div>

<div class="ui-grid-row">
<div class="ui-grid-col-12">
<p-galleria [images]="images" panelHeight="400" showCaption="false"></p-galleria>
</div>
</div>
</div>
</p-tabPanel>
</p-tabView>



<button (click)="goBack()">Back</button>

[kukeltje]

Please edit your posr and use code tags. And make it an mcve (see google)