You are correct that the problem was height:100% , but this is not a mysterious conflict with Bootstrap. You haven’t indicated your code enough to know exactly what is wrong, but you have seen and experienced similar problems many times, I have a pretty good idea what it would be like.
I suspect that at the time of initializing your map, the hero-unit element has not yet received a height or width, so its height is zero. Because of this, the map_canvas element also has a height of zero. In the end, 100% of zero is zero.
When you call new google.maps.Map() , it creates a map using the current height of the map_canvas element that you give it, i.e. zero. This is not so good.
Even if you later give the hero-unit height, this will not fix it. Of course, height:100% will now resize map_canvas to fit, but the Maps API does not know what happened!
You can fix this the same way you can by pointing your map_canvas element to an explicit height or, alternatively, making this call after resizing the element:
google.maps.event.trigger( map, 'resize' );
This tells the Maps API to look at the new element size and adjust accordingly. It is also a call to do if you ever want to resize a map: listen for the resize event on your map element and make this call when the event fires.
To illustrate, let's look at a very simplified version of your code with some log input:
<!DOCTYPE html> <html> <head> <title>CSS Width and Height Test</title> </head> <body onload="test()"> <div id="container"> <div id="hero-unit"> <div id="map_canvas" style="width: 100%; height: 100%" ></div> </div> </div> <script> function test() { var hero = document.getElementById('hero-unit'); var canvas = document.getElementById('map_canvas'); console.log( 'Canvas size before setting hero size: ' + canvas.offsetWidth + 'x' + canvas.offsetHeight ); hero.style.height = '300px'; hero.style.width = '400px'; console.log( 'Canvas size after setting hero size: ' + canvas.offsetWidth + 'x' + canvas.offsetHeight ); } </script> </body> </html>
Save this page and view it in your favorite browser with the developer tools console open so you can see the log messages. For example, in Chrome on Windows, use the F12 key to open the developer tools, then click the Console tab.
You should see something like this (the widths will depend on the width of your browser window):
Canvas size before setting hero size: 1244x0 css-height.html:20 Canvas size after setting hero size: 400x300 css-height.html:29
As you can see, up to the size of the parent element, the height of map_canvas is zero, and its width is greater than you expected.
Some related comments:
If you’re not used to using the tools of the browser developer, as we did, spend a little time and familiarize yourself with them. Chrome, in particular, has a fantastic set of tools in this dashboard. You can set a breakpoint in your JavaScript code, either by adding this operator anywhere:
debugger;
or by looking at the source file in the developer tools and clicking the left field. When the browser stops at a breakpoint, you can check JavaScript variables and all kinds of things. You can use the Elements tab on the developer toolbar to check your DOM elements at any time. For this error, you can find your map_canvas in the Elements element table tree and look at its computed styles, where you will find that the height is zero.
Also, save some trouble debugging the Maps API code by completely ignoring your PHP code. The Maps API is the JavaScript API. It does not see your PHP code; he doesn’t even know that you wrote your site in PHP. All he sees is the final HTML / CSS / JavaScript code that is delivered to the browser.
Finally, it looks like you are loading the Maps API twice, first with a built-in script, and then with an asynchronous method. Once upon a time a lot. I would stick with a built-in script for simplicity if you don't need asynchronous loading.