StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You're right that the <code>height:100%</code> was the problem, but it isn't a mysterious conflict with Bootstrap. You didn't show enough of your code to be certain exactly what is wrong, but having seen and experienced similar problems many times, I have a pretty good idea what it's likely to be.</p> <p>I suspect that at the time you initialize your map, the <code>hero-unit</code> element has not yet been given a height or width, so its height is zero. Because of this, the <code>map_canvas</code> element also a height of zero. After all, 100% of zero is zero.</p> <p>When you call <code>new google.maps.Map()</code>, it creates the map using the current height of the <code>map_canvas</code> element you give it, that is, zero. This doesn't work out so well.</p> <p>Even if you later give <code>hero-unit</code> a height, that doesn't fix it. Sure, the <code>height:100%</code> will now cause <code>map_canvas</code> to also resize to match, but the Maps API doesn't know this happened!</p> <p>You can fix this either as you did by giving your <code>map_canvas</code> element an explicit height, or alternatively by making this call <em>after</em> the element is resized:</p> <pre><code>google.maps.event.trigger( map, 'resize' ); </code></pre> <p>That tells the Maps API to look at the new element size and adjust accordingly. This is also the call to make if you ever want a resizable map: listen for the <code>resize</code> event on your map element and make that call when the event fires.</p> <p>To illustrate, let's look at a very simplified version of your code with some logging thrown in:</p> <pre><code><!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> </code></pre> <p>Save that 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 <code>F12</code> key to open the developer tools, then click the Console tab.</p> <p>You should see something like this (the width values will depend on your browser window's width):</p> <pre><code>Canvas size before setting hero size: 1244x0 css-height.html:20 Canvas size after setting hero size: 400x300 css-height.html:29 </code></pre> <p>As you can see, before its parent is sized, the <code>map_canvas</code> height is zero and its width is <em>larger</em> that you might have expected.</p> <p>Some related comments:</p> <p>If you're not accustomed to using the browser's developer tools as we've done here, spend some time and get familiar with them. Chrome in particular has a fantastic set of tools in that developer panel. You can set a breakpoint in your JavaScript code either by adding this statement anywhere:</p> <pre><code>debugger; </code></pre> <p>or by viewing the source file in the developer tools and clicking in the left margin. When the browser stops at the breakpoint, you can examine JavaScript variables and all sorts of things. You can use the Elements tab in the developer tools panel to inspect your DOM elements at any time. For this bug you could find your <code>map_canvas</code> in the Elements tab tree view and look at its Computed Styles - where you would find that the height is zero.</p> <p>Also, save yourself some trouble when debugging Maps API code by <em>completely ignoring</em> your PHP code. The Maps API is a JavaScript API. It doesn't see your PHP code; it doesn't even know that your wrote your site in PHP. All it sees is the final HTML/CSS/JavaScript code delivered to the browser.</p> <p>Finally, it looks like you're loading the Maps API twice, first with an inline script and later with an asynchronous method. Once is plenty. I'd stick with the inline script for simplicity unless you need the asynchronous loading.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload