var map = L.map('map1');
var map = L.map('map2');
var map = L.map('map3');
Technically, yes, you have 3 maps; but you only care to "remember" one of them (map3). At this point in time, I'm going to assume you really do want 3 unique Leaflet instances in the DOM (I'll also go ahead and say, that's probably not the right decision).
First, my best guess is your using a JavaScript library that provides standard tab functionality. Which means your tabs aren't loading new pages (therefore, the unique ID requirement); instead you are merely hiding/showing DOM elements based on user events.
Your HTML was fine, so we'll use that again - our 3 elements. There's nothing special about these elements, they are just the individual pieces of paper we've been told to draw our maps on. In fact, I'm going to name mine a bit different just to reinforce that fact a bit:
<!-- Just sheets of paper we can draw on, nothing more -->
<div id="weather"></div>
<div id="population"></div>
<div id="healthcare"></div>
Now, our friend asks us to draw him a map on the sheet of paper labelled weather:
// Stop eating the crayons
var map = L.map('weather');
There you go buddy, at your request: we call this wonderful work of art: map!
Now, he wants us to draw some more - on the rest of our papers!
var map = L.map('population');
Another one done! I will call this one: map!
var map = L.map('healthcare');
And this one's called... map! Hrmmmm... we didn't really plan this out very well. How are we supposed to show anyone the first or second pages we drew on!? We could figure it out, given enough time, sure... but even then how are our friends going to ask us to show it to them? The only way for our friends to ask us to show them our first map is for them to describe it very well while we look through every single thing in our room for something that matches that description.
It would have been a lot easier if we had just named all of our maps something unique.
var weatherMap = L.map('weather');
var populationMap = L.map('population');
var healthcareMap - L.map('healthcare');
Even better - what if we set aside a special place just for our maps? Then not only would we know right where to go in our room to find them; we'd know that every single one of them was there. If a friend asked us for a map there's no need to go look in the closet, we know they are all in our folder right here:
var maps = [
L.map('weather'),
L.map('population'),
L.map('healthcare')
];
It can definitely get a lot better than that though. How you structure everything really just depends on the data you are working with and what, exactly, you are trying to accomplish.
If you look here: http://leafletjs.com/reference.html#tilelayer you can set up maxZoom and minZoom for layers.
I would have thought that this is what you're trying to achieve with your layers, right?
Either do that or start your initial state in the way you want it. So where you have:
var marker_reptile_house = L.marker([33.92641, -83.387], {icon: buildingPin}).addTo(map);
LayerSeventeen.addLayer(marker_reptile_house);
get rid of the '.addTo(map)' bit, like this:
var marker_reptile_house = L.marker([33.92641, -83.387], {icon: buildingPin});
LayerSeventeen.addLayer(marker_reptile_house);
Still, the first option, adding 'maxZoom: 17' or whatever is appropriate, as another option in the L.marker() bit, is best and saves you writing the logic.
Best Answer
The Leaflet framework can only be used to control the map itself and its controls (like zoom, search, etc.), not the rest of the webpage.
Therefore the map itself has to be inside a normal div element. To change the size or position of this div element you can use plain CSS/HTML or any frontend framework (e.g. bootstrap) you like.