Reputation: 2169
I am embedding a google map in web page based on Bootstrap css. Here follows the code in which he id for the map-canvas is used.
<div class="container-fluid">
<div class="row" style="height:100%;">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="height:100%; width:100%;">
test
<div style="height:100%; width:100%;">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas" style="height:100%">s</div>
</div>
</div>
</div>
</div>
After the page is loaded a javacript function is invoked which get the id of the map-canvas and substitute it with the map retrieved from Google. The problem is that the map is not showing and I guess it depends on some issue related to the width or height of the different containers. How should I fix it?
here is a piece of the javascript
var map;
function initialize() {
var markers = [];
var mapOptions = {
center : new google.maps.LatLng(43.77, 11.24),
zoom : 4,
scrollwheel : false,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
console.log("test");
console.log(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
[upate] Changed like this:
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="height:100%; width:100%;">
<div class="row" style="100px;">
<div style="height:100%; width:100%;">
<div id="map-canvas">s</div>
</div>
</div>
</div>
</div>
But it doesn't work
Upvotes: 1
Views: 4486
Reputation: 499
I had this problem and also needed to define a minimum width for the map as well to make it work. For Example:
Upvotes: 0
Reputation: 2460
Set the "min-height" by this div will reserve space, you need to adjust min-height as per your layout.
#map {
min-height: 500px;
width: 100%;
height:100%
}
<div class="col-md-7">
<div id="map"></div>
</div>
Upvotes: 2
Reputation: 9669
the map-canvas or its parents must have a decent height. Try
<div id="map-canvas" style="height:100px;"></div>
note the px
instead of %
Upvotes: 6