Please Help Me Figure Out Why Google Map Is Not Loading (Javascript, PHP, Bootstrap)

Hello,

I'm working on a Google Map inside a webpage that uses PHP include for header and footer with a Bootstrap theme.  

In the code below all of the Javascript Alerts work fine, but the map never appears.  I can't figure out why.  

Can you help me solve this problem?  (I don't mind serious rewrite of include files.)

Thanks,
Jason

bootstrap-map-test.php

<?php 
//========================================================================================
// GOOGLE MAP TEST
//========================================================================================

//-- SET TIMEZONE ----------------------------------
date_default_timezone_set('America/New_York');

//--- AUTHENTICATE ---------------------------------
include("bootstrap-header.php");

//--- WRITE HEADER ---------------------------------
writeheader("Google Map Test");

?>

<!-- Google Map Related Code -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>

<h1>Google Map Test Page</h1>

<!-- Google Map -->
<div id="map-canvas"/>

<script>
//----------------------------------------------------------------------------
// INITIALIZE FUNCTION
//    * Creates Map at Centered at Binghamton
//----------------------------------------------------------------------------
function initialize() {
  alert("Inside Initialize");
  var latitude = 42.0986111,
      longitude = -75.9183333,
      center = new google.maps.LatLng(latitude,longitude),
      mapOptions = {
        center: center,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: true
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
alert("Before Initialize");
initialize();
alert("After Initialize");
</script>

<?php  include("bootstrap-footer.php"); ?>

Select allOpen in new window

bootstrap-header.php

<?
//=======================================================================================
// HEADER
//=======================================================================================

//---------------------------------------------------------------------------------------
// Start Session - Check Credentials
//---------------------------------------------------------------------------------------
session_start(); 

//--- Set Global Variables...
define('FULLURL','*************');
define('DS',  TRUE); // used to protect includes
define('USERNAME', strtoupper($_SESSION['username']));
define('SELF',  $_SERVER['PHP_SELF'] );

//--- Set Global Database Constants...
define("DB_HOST", "localhost") ;
define("DB_PORT", "3306") ;
define("DB_USER", "*************") ;
define("DB_PASSWORD", "************") ;
define("DB_DATABASE", "*************") ;

//--- Catch Not Logged In...
if (!USERNAME or isset($_GET['logout']))
 include('login.php');

// everything below will show after correct login 

//---------------------------------------------------------------------------------------
// CONVERT MM/DD/YYYY DATE INTO YYYY-MM-DD FORMAT: MySQL requires this for Date Fields
//---------------------------------------------------------------------------------------
function mdy2mysql($input) {
  $output = false;
  $d = preg_split('#[-/:. ]#', $input);
  if (is_array($d) && count($d) == 3) {
    if (checkdate($d[0], $d[1], $d[2])) {
      $output = "$d[2]-$d[0]-$d[1]";
    }
  }
  return $output;
}


//---------------------------------------------------------------------------------------
// OPEN MYSQL CONNECTION: Opens connection as "$con" to be used in rest of script
//---------------------------------------------------------------------------------------
function mysqli_open_con() {

   //--- Establish mySQL Database Connection...
   $connection = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE, DB_PORT) ;
   if(!$connection)
   {
      trigger_error('Connect Error (' . mysqli_connect_errno() . ') ' . mysqli_connect_error()) ;
      die('Connect Error (' . mysqli_connect_errno() . ') ' . mysqli_connect_error());
      //throw new Exception(die('Connect Error (' . mysqli_connect_errno() . ') ' . mysqli_connect_error())) ;
   }
   else
   {
      return $connection ;
   }

}


//---------------------------------------------------------------------------------------
// WRITE HEADER: Create Header Function so that it can accept Parameters
//---------------------------------------------------------------------------------------
function writeheader($title) {
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title><?=$title?></title>

    <!-- Bootstrap Related Code -->
    <link href="./bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- J-Query Related Code -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

</head>

<body>

  <!-- Bootstrap NavBar -->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="http://www.squeezeoj.com/index.php">BCLD8</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="http://www.squeezeoj.com/index.php">Home</a></li>
          <li><a href="map.html">Map</a></li>
          <li><a href="citizens.php">Citizens</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="http://www.squeezeoj.com/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

  <div class="container">
    <p><br/><br/></p>
  <!-- BEGIN CONTENT ------------------------------------------------------------------ -->
<?
}
?>

Select allOpen in new window

bootstrap-footer.php

<?php
//=======================================================================================
// FOOTER
//=======================================================================================
?>
  <!-- END CONTENT -------------------------------------------------------------------- -->
  </div>

</body>
</html>

Select allOpen in new window