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"); ?>

Open 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 ------------------------------------------------------------------ -->
<?
}
?>

Open in new window


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

</body>
</html>

Open in new window

SqueezeOJAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
You have given your map a height of 100% but the placement of your styling and the fact that you have other items on the page is messing with your map height.

1. Give your map a fixed height - to show it is working
2. Fix your markup - your current structure is full of errors.
Julian HansenCommented:
Further to the above post

Your map is in a container - for the map to be 100% height the container it is in has to be 100% so you need to add
  .container {height: 100%;}

Open in new window


That will make your map visible but it will make the map and container 100% of screen height - given you have a nav that is taking up space the map will extend below the bottom of the screen.

You can fix this with some padding and negative margins and by giving your <nav> a fixed height.

You have also put your styling in page - instead of the head this may work but it is non-standard.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
A good way to check for markup errors is to send your site to the W3 validator.
http://validator.w3.org/nu/
SqueezeOJAuthor Commented:
Of course!  Thanks for your help.
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.