Currently struggling to incorporate a Google Map into a 2 column grid using Bootstrap. The issue at hand is that the column containing the map has somehow collapsed, resulting in only the top portion of the map being visible when it should be fully embedded. I have attempted setting the html and body elements to 100% height, followed by setting the div containing the map to 30%, but unfortunately, no success. Is there something obvious that I am overlooking? See the code snippet below for reference...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
html{height:100%;}
body{height:100%;}
#map{height:30%;}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Testing</h1>
</div>
<div class="row">
<div class="col-md-3">
<form>
<input type="range" name="points" min="0" max="1000">
</form>
</div>
<div id ="map" class="col-md-9">
</div>
</div>
</div>
<script>
var map;
var mapDiv = document.getElementById('map');
var placesMap = {
belfast: {
center:{lat: 54.605035, lng:-5.832087},
population:50000
},
lisburn: {
center:{lat: 54.516246, lng:-6.058010599999989},
population:40000
},
portadown: {
center:{lat: 54.420333, lng:-6.454839},
population:30000
},
bangor: {
center:{lat: 54.643786, lng:-5.624201},
population:20000
}
};
//Called on page load by callback attribute in Google Maps API script source
function initMap() {
map = new google.maps.Map(mapDiv, {
center:{lat:54.605035,lng:-5.832087},
zoom:8
});
for (place in placesMap) {
var placeCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center:placesMap[place].center,
radius: Math.sqrt(placesMap[place].population) * 100
});
}
}
</script>
<!-- Google api script -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MyKeyRemoved&callback=initMap"></script>
</body>
</html>