Why does Google Maps appear to be allergic to their "Hello, World!" map being put into HTML Boilerplate 3 and its jQuery?

Question

I have a fairly trivial adaptation of the Google Maps being imported into Boilerplate 3 with its HTML. Do I need to activate the key? (I'd expect some form of more informative error message if I did.) My code is getting a blank screen; the code is:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">

  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/style.css">

  <script src="js/libs/modernizr-2.5.3.min.js"></script>
  <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map_canvas { height: 100%, width: 100% }
  </style>
</head>
<body>
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  <header>

  </header>
  <div role="main">

    <div id="map_canvas">
    </div>

  </div>
  <footer>

  </footer>


  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>

<script>


function initialize()
    {
    var myoptions = {
        zoom: 4,
        center: new google.maps.LatLng(42.881944, -87.627778),
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    var map = new google.maps.Map(jQuery('#map_canvas')[0],
    myoptions);


    }

function load_script()
    {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?key=AIzaSyAi288X8h9Y4fXM21Q0-my6O6kiLaDeC7M&sensor=false&callback=initialize";
    document.body.appendChild(script);
    }

jQuery(function()
    {
    initialize();
    load_script();
    });
</script>
</body>
</html>

Is there a difference between this question and your previous question (referred to in @AndrewLeach's comment)? They seem to be pretty much the same and I just want to double-check if it may be an inadvertent double-post, before I start digging into the details of the other question. It looks like Heitor put together a great answer on this one. — Sean Mickey, Jun 28 '12 at 04:48

score 2 · Answer 1 · answered Jun 27 '12 at 17:56

I don't know what Boilerplate does so I made as few changes as I could to the posted source:

(1) in #map_canvas style, changed a comma to semicolon after height: 100%

(2) the div with role="main" also needs height: 100%, so I gave it an id of wrapper and added an appropriate style

(3) jQuery include should have the http: in front of the URL

(4) calling initialize inside the final jQuery function call is unnecessary, because the script include shown in load_script has callback=initialize. Anyway, calling the map code before including the maps JS won't work.

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">

  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/style.css">

  <script src="js/libs/modernizr-2.5.3.min.js"></script>
  <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #wrapper { height: 100%; width: 100% }
    #map_canvas { height: 100%; width: 100% }
  </style>
</head>
<body>
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  <header>

  </header>
  <div role="main" id="wrapper">

    <div id="map_canvas">
    </div>

  </div>
  <footer>

  </footer>


  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>

<script>


function initialize()
    {
    var myoptions = {
        zoom: 4,
        center: new google.maps.LatLng(42.881944, -87.627778),
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    var map = new google.maps.Map(jQuery('#map_canvas')[0],
    myoptions);


    }

function load_script()
    {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?key=AIzaSyAi288X8h9Y4fXM21Q0-my6O6kiLaDeC7M&sensor=false&callback=initialize";
    document.body.appendChild(script);
    }

jQuery(function()
    {
    load_script();
    });
</script>
</body>
</html>

Why does Google Maps appear to be allergic to their "Hello, World!" map being put into HTML Boilerplate 3 and its jQuery?

1 Answers1