Nov 18, 2022

# Solution 1 :

Seems to be working as expected, after adding style to set height on `map1` and `map2` containers:

``````#map1, #map2 {
height: 500px;
}
``````
``````mapboxgl.accessToken = 'access_token';

var a = -79.5,
b = 35,
c = -69.5,
d = 45,
p = -74.5,
q = 40,
e = -79.5,
f = 35,
g = -69.5,
h = 45,
y = -74.5,
z = 40;

// Set bounds
var bounds = [
[e, f], // Southwest coordinates
[g, h, ] // Northeast coordinates
];
var map = new mapboxgl.Map({
container: 'map1',
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [p, q],
zoom: 12.3,
maxBounds: bounds // Sets bounds as max
});
// Add zoom and rotation controls to the map.

// Set bounds
var bounds = [
[a, b], // Southwest coordinates
[c, d, ] // Northeast coordinates
];
var map = new mapboxgl.Map({
container: 'map2',
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [y, z],
zoom: 9.8,
maxBounds: bounds // Sets bounds as max
});
// Add zoom and rotation controls to the map.

function openTab(evt, era) {
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
for (i = 0; i < tablinks.length; i++) {
}
document.getElementById(era).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();``````
``````#map1,
#map2 {
height: 500px;
}``````
``````<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'part1')" id="defaultOpen">ABC DEF</button>
</div>
<div id="part1" class="tabcontent">
<div id="map1"></div>
</div>

<div id="part2" class="tabcontent">
<div id="map2"></div>
</div>``````

# Problem :

I am using maps from `mapbox` which doesn’t load full on clicking the tabs.

On clicking the tab, map gets resized into 50% of the original size (not sure why this is happening).

The `html/javascript` of map is shown below:

``````<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>

<div id="part1" class="tabcontent">

<div id="map1"></div>
</div>

<div id="part2" class="tabcontent">

<div id="map2"></div>
</div>

<script>
mapboxgl.accessToken = 'hello';
// Set bounds
var bounds = [
[e, f], // Southwest coordinates
[g, h, ]  // Northeast coordinates
];
var map = new mapboxgl.Map({
container: 'map1',
style: 'mapbox://styles/abcdef',
center: [p, q],
zoom: 12.3,
maxBounds: bounds // Sets bounds as max
});
// Add zoom and rotation controls to the map.
</script>

<script>
mapboxgl.accessToken = 'hello';
// Set bounds
var bounds = [
[a, b], // Southwest coordinates
[c, d, ]  // Northeast coordinates
];
var map = new mapboxgl.Map({
container: 'map2',
style: 'mapbox://styles/abcdef',
center: [y, z],
zoom: 9.8,
maxBounds: bounds // Sets bounds as max
});
// Add zoom and rotation controls to the map.
</script>

<script>
function openTab(evt, era) {
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
for (i = 0; i < tablinks.length; i++) {
}
document.getElementById(era).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
``````

Problem Statement: I am wondering what changes I need to make in the script above so that it loads completely on tab click `(doesn't get resized into 50% of the original size)`

### Comment posted by Alexandre Elshobokshy

Please fix your code to at least run. Right now it shows

### Comment posted by Dipen Shah

@flash it seems to be working if you set height on both

### Comment posted by flash

@DipenShah thanks for the response. I am wondering if you can show the pointers on fiddle so that I can have a look.

### Comment posted by flash

@IslamElshobokshy Can you give me pointer on fiddle ?

### Comment posted by Dipen Shah

@flash sure take a look at example I added as an answer.

### Comment posted by flash

I can’t see anything happening on clicking

### Comment posted by flash

I took your code in the fiddle. Nothing seem to work. Maybe I am missing something ?

### Comment posted by Dipen Shah

Did you add your api key? Check the console, it is working for me