Google map API not showing map on page not sure why

Question

It is now fixed, I guess Twitter Bootstrap CSS must conflict with setting height and width to 100%. Leaving for anybody that has a similar issue.

I'm trying to implement a google map on my webpage when a user clicks a link, all the PHP works properly but for some reason the google map is not showing, I've re-read all the examples on API docs and re-read all the code, but still not working not sure why..

Here is the page that displays the map

Note: The PHP works fine and the script is being loaded on page load, but the map is not.

<?php
    /* Include header and config and set variable*/
    require_once('config.inc.php');
    require_once($rootdir . $dirsubfolder . 'navbar.php');
    $route = $_GET['route'];
?>

<?php
/* User wants to retrieve their route */
if (isset($route)) {
?>


<?php
/* User wants Route 1 */
if (strcmp($route, "sunroute1") == 0) {
?>
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }

      function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.googleapis.com/maps/api/js?key=WORKINGKEYk&sensor=true&callback=initialize";
        document.body.appendChild(script);
      }

    window.onload = loadScript;
</script>
<?php
printf('worked');
} else { printf('failed'); }
?>

<div class="container">
    <div class="hero-unit">
        <div id="map_canvas" style="width: 100%; height: 100%"></div>
    </div>
</div>








<?php
    /* End isset(route) */
    }
    /* Include footer */
    require_once($rootdir . $dirsubfolder . 'footer.php');
?>

and inside my footer.php I have

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEYWORKING&sensor=false"></script>

Here is the view source from the page

<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }

      function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.googleapis.com/maps/api/js?key=WORKING&sensor=true&callback=initialize";
        document.body.appendChild(script);
      }

    window.onload = loadScript;
</script>
worked
<div class="container">
    <div class="hero-unit">
        <div id="map_canvas" style="width: 100%; height: 100%"></div>
    </div>
</div>

And my scripts in the footer

      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script src="js/bootstrap-transition.js"></script>
      <script src="js/bootstrap-alert.js"></script>
      <script src="js/bootstrap-modal.js"></script>
      <script src="js/bootstrap-dropdown.js"></script>
      <script src="js/bootstrap-scrollspy.js"></script>
      <script src="js/bootstrap-tab.js"></script>
      <script src="js/bootstrap-tooltip.js"></script>
      <script src="js/bootstrap-popover.js"></script>
      <script src="js/bootstrap-button.js"></script>
      <script src="js/bootstrap-collapse.js"></script>
      <script src="js/bootstrap-carousel.js"></script>
      <script src="js/bootstrap-typeahead.js"></script>
      <script src="https://maps.googleapis.com/maps/api/js?key=WORKING&sensor=false"></script>
</body>
</html>

Answer 1

You're right that the height:100% 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.

I suspect that at the time you initialize your map, the hero-unit element has not yet been given a height or width, so its height is zero. Because of this, the map_canvas element also a height of zero. After all, 100% of zero is zero.

When you call new google.maps.Map(), it creates the map using the current height of the map_canvas element you give it, that is, zero. This doesn't work out so well.

Even if you later give hero-unit a height, that doesn't fix it. Sure, the height:100% will now cause map_canvas to also resize to match, but the Maps API doesn't know this happened!

You can fix this either as you did by giving your map_canvas element an explicit height, or alternatively by making this call after the element is resized:

google.maps.event.trigger( map, 'resize' );

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 resize event on your map element and make that call when the event fires.

To illustrate, let's look at a very simplified version of your code with some logging thrown in:

<!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 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 F12 key to open the developer tools, then click the Console tab.

You should see something like this (the width values will depend on your browser window's width):

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, before its parent is sized, the map_canvas height is zero and its width is larger that you might have expected.

Some related comments:

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:

debugger;

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 map_canvas in the Elements tab tree view and look at its Computed Styles - where you would find that the height is zero.

Also, save yourself some trouble when debugging Maps API code by completely ignoring 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.

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.

Answer 2

It is now fixed, I guess Twitter Bootstrap CSS must conflict with setting height and width to 100%. Leaving for anybody that has a similar issue.