title: Google map API not showing map on page not sure why
body: <p>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.</p>
  
  <p>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..</p>
  
  <p>Here is the page that displays the map</p>
  
  <p>Note: The PHP works fine and the script is being loaded on page load, but the map is not.</p>
  
  <pre><code>&lt;?php
      /* Include header and config and set variable*/
      require_once('config.inc.php');
      require_once($rootdir . $dirsubfolder . 'navbar.php');
      $route = $_GET['route'];
  ?&gt;
  
  &lt;?php
  /* User wants to retrieve their route */
  if (isset($route)) {
  ?&gt;
  
  
  &lt;?php
  /* User wants Route 1 */
  if (strcmp($route, "sunroute1") == 0) {
  ?&gt;
  &lt;script type="text/javascript"&gt;
        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&amp;sensor=true&amp;callback=initialize";
          document.body.appendChild(script);
        }
  
      window.onload = loadScript;
  &lt;/script&gt;
  &lt;?php
  printf('worked');
  } else { printf('failed'); }
  ?&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="hero-unit"&gt;
          &lt;div id="map_canvas" style="width: 100%; height: 100%"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
  
  
  
  
  &lt;?php
      /* End isset(route) */
      }
      /* Include footer */
      require_once($rootdir . $dirsubfolder . 'footer.php');
  ?&gt;
  </code></pre>
  
  <p>and inside my footer.php I have</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=MYKEYWORKING&amp;sensor=false"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is the <code>view source</code> from the page</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
        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&amp;sensor=true&amp;callback=initialize";
          document.body.appendChild(script);
        }
  
      window.onload = loadScript;
  &lt;/script&gt;
  worked
  &lt;div class="container"&gt;
      &lt;div class="hero-unit"&gt;
          &lt;div id="map_canvas" style="width: 100%; height: 100%"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my scripts in the footer</p>
  
  <pre><code>      &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-transition.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-alert.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-modal.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-dropdown.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-scrollspy.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-tab.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-tooltip.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-popover.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-button.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-collapse.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-carousel.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-typeahead.js"&gt;&lt;/script&gt;
        &lt;script src="https://maps.googleapis.com/maps/api/js?key=WORKING&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>