My goal is to showcase Google Maps on my website, and every time I try to do so using the following code:
<div class="large-12 columns" id="map-canvas"></div>
The map displays perfectly and works as expected.
However, when I nest this div within a "row" class like this:
<div class="row">
<div class="large-12 columns" id="map-canvas"></div>
</div>
The map mysteriously disappears from view.
Below is the CSS styling that I am using:
html{
height: 100%;
}
body{
height: 100%;
}
#map-canvas{
height: 100%;
}