I am trying to implement google maps on bootstrap.
I've followed Google's own guide, here: https://developers.google.com/maps/documentation/javascript/examples/map-simple
Whilst this works on a standalone page, when I add the Bootstrap CSS the map doesn't show. I can't seem to find a hack that fixes it.
HTML:
<body>
<div id="map-canvas"></div>
</body>
Script:
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
CSS (over bootstrap)
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
See here for jsFiddle: http://jsfiddle.net/robmc/6BTjE/2/
Has anyone encountered this before? I must be missing a basic workaround but no amount of forum searching has helped.
Thanks
Best Answer
I've fixed the issue by changing the height to px. hope it helps