Level 53
Sounds like the tab is displayed long before the map. You probably need to refresh the page after the map data is received.
Dec 17, 2016
5
Level 3
Google Map in Bootstrap Tabs
Hi All.
I try to display a Google map in a Bootstrap tab, but the map is not displayed.
Outside the tab the map is display correctly.
HTML :
<!-- MAP -->
<div class="tab-pane fade text-center" id="address">
{{ $ad->address }}
<br>
{{ $ad->zip }} {{ $ad->city }} - {{ $ad->country }}
<!-- MAP -->
<div id="map">
</div>
<!-- End ...MAP -->
</div>
<!-- End ... MAP -->
SCRIPT :
<script>
var initMap = function()
{
var map = new google.maps.Map( document.querySelector( '#map' ),
{
center : { lat : 35, lng : -85 },
zoom : 15
} );
var geocoder = new google.maps.Geocoder();
geocodeAddress( geocoder, map );
// ------------------------------------------------------------
function geocodeAddress( geocoder, resultsMap )
{
var address = '3 rue de la république 06000 Nice FR';
geocoder.geocode( { 'address': address }, function( results, status )
{
if( status === google.maps.GeocoderStatus.OK )
{
resultsMap.setCenter( results[0].geometry.location );
var marker = new google.maps.Marker(
{
map : resultsMap,
position : results[ 0 ].geometry.location
} );
}
else
{
alert( 'Geocode was not successful for the following reason : ' + status );
}
} );
}
};
</script>
Level 122
try giving the map div some dimensions. It may be that google is rendering a 0 by 0 sized map because the div possibly has no height or width when tab not selected
Level 3
I have this css :
#map
{
width : 100%;
height : 300px;
}
There is a blank space where the map should be
Level 53
First thing I would do as very basic trouble shooting is put a border in your css to make sure the div is how you expect. Next, I would check the google response for the map data and make sure it is correct. If both of those are there, then maybe the cause is what I first said...the tab is rendered before the map data is received.
Level 3
I used a trick, I move the map outside the screen, and when I click on the tab 5 I move the map to it's original postion :
JS :
$( document ).ready( function()
{
$( '#map' ).css( { 'position' : 'absolute', 'top' : '-9999px' } );
// ------------------------------------------------------------
$( '#tab_5' ).on( 'click', function()
{
$( '#map' ).css( { 'position' : 'relative', 'top' : '0' } );
} );
// ------------------------------------------------------------
$( '#tab_1, #tab_2, #tab_3, #tab_4' ).on( 'click', function()
{
$( '#map' ).css( { 'position' : 'absolute', 'top' : '-9999px' } );
} );
} );
Please or to participate in this conversation.