CODEWITHSUNDEEP
htmlcssgoogle-mapstwitter-bootstrap
lowcoupling
lowcoupling

Reputation: 2169

Google maps not showing in bootstrap page

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

Answers (3)

David Robertson
David Robertson

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

Irfan Ashraf
Irfan Ashraf

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

nozzleman
nozzleman

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

Related Questions