Google Maps doesn't seen in Jade - HTML works well

Question

I have a very interesting problem - at least to me :). Below you'll see the jade, the html, and a google chrome screenshot:

home.html:

<html ng-app="mtn">
 <head>
   <title>Fluid Width HTML Example </title>
   <!--<script src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false"> -->
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="/javascripts/vendor/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/stylesheets/style.css" />
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript" src="/javascripts/main.js"> </script>
<script src="/javascripts/fb_init.js"> </script>
<script type="text/javascript" src="/javascripts/map_data.js"></script>
<script src="/javascripts/vendor/angular/angular.min.js"></script>
<script src="/javascripts/controllers/reg.js"></script>
<script src="/javascripts/controllers/login.js"></script>
<script src="/javascripts/controllers/runtests.js"></script>
<script src="/javascripts/controllers/ui_controllers.js"></script>
<script src="/javascripts/controllers/markers.js"></script>
<script src="/javascripts/vendor/angular-cookies/angular-cookies.js"></script>
<script src="/javascripts/map.js"></script>

</head>

<body onload='initialize();'>
     <div id="fb-root"></div>
     <div id="topbar">
        <div style="float: left"><fb:login-button  width="200" max-rows="1" auto_logout_link="true"></fb:login-button></div>
     </div>
    <div id="all_content" style="height: 100%;">
       <!--<div id="output" style="color: #FFFFFF;" />-->
       <div id="googleMap">

       </div> 
      <div id="icons">
        <span> 
          </span>

      </div> 
      <div id="markers_list">
        <span>
          </span>
      </div>

      <div id="ftests">
        <div id="dialog" class="window">
          <b>Testing of Modal Window</b> |
          <a href="#" class="close">Close it</a>
        </div>
        <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
         <div id="mask"></div>
       </div>

      <div id="sidebar" ng-controller="ui_controllers">
         <button id="tog_icons_but" ng-click="toggle_icons()"> &lt;&lt; Icons </button>
      </div>
    </div>

    <div id="tests" ng-controller="runtests">
      <div id="messages" ng-show="message">{{ message }}</div>
      <form id="tests_form">
        <div>
        </div>

        <button ng-click="reset()"></button>
        <button ng-click="run()">Run Tests</button>
      </form>
    </div>


</body>
</html>

home.jade:

extends layout.jade
block content
  #fb-root
  #topbar
    div(style='float: left;')
      fb:login-button(width='200', max-rows='1', auto_logout_link='true')
  #all_content(style='height: 100%;')
    //
      <div id="output" style="color: #FFFFFF;" />
    #googleMap
    #icons
      span
    #markers_list
      span
    #ftests
      #dialog.window
        b Testing of Modal Window
        | |
        a.close(href='#') Close it
      //
         Do not remove div#mask, because you'll need it to fill the whole screen 
      #mask
    #sidebar(ng-controller='ui_controllers')
      button#tog_icons_but(ng-click='toggle_icons()')  &lt;&lt; Icons
  #test_results 
  #tests(ng-controller='runtests')
    #messages(ng-show='message') {{ message }}
    form#tests_form
      div
      button(ng-click='reset()')
      button(ng-click='run()') Run Tests

layout.jade:

doctype html
html(ng-app='mtn')
head
  title= 'title'
  //
    <script src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false"> 
  script(src='http://code.jquery.com/jquery-1.9.1.js')
  script(src='/javascripts/vendor/jquery.easing.1.3.js')
  link(rel='stylesheet', href='http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css')
  link(rel='stylesheet', href='/stylesheets/style.css')
  script(src='http://code.jquery.com/ui/1.10.4/jquery-ui.js')
  script(type='text/javascript', src='https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false')
  script(type='text/javascript', src='http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js')
  script(type='text/javascript', src='/javascripts/main.js')
  script(src='/javascripts/fb_init.js')
  script(type='text/javascript', src='/javascripts/map_data.js')
  script(src='/javascripts/vendor/angular/angular.min.js')
  script(src='/javascripts/controllers/reg.js')
  script(src='/javascripts/controllers/login.js')
  script(src='/javascripts/controllers/runtests.js')
  script(src='/javascripts/controllers/ui_controllers.js')
  script(src='/javascripts/controllers/markers.js')
  script(src='/javascripts/vendor/angular-cookies/angular-cookies.js')
  script(src='/javascripts/map.js')
body(onload="initialize();")
  block content

chrome screenshot:

The problem here is that, even though the maps is loaded into the div with the id "googleMap", it is not shown on the screen. When I use HTML, everything works fine, but when using Jade, all the stuff works except the google maps is not being shown. What could be the reasons for this error? All other files are fine - I tested them individually after using Jade - but of course if you think that the problem is on those files, I can re-check them again. ;)

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

OK, I kinda feel a bit dumb right now. When I converted the html to Jade, the conversion tool automatically put "doctype html" to the head of the html document. And with that specified almost all my CSSes are neglected, because browsers tend to operate on "standard mode". That's why, even though I made my map with CSS {width: 100%, height: 100%}, it is rendered as {width: 0px, height: 0px} (look here - "Declaring your application as HTML5").

For full detailed information about all three browser (for mozilla) modes:

To check your browsers rendering mode, see this answer

There a lot of detailed information out there besides these links, but I tried to put the basic ones in one place to access easily. Maybe it would help someone else.

edited May 23 '17 at 12:24

Community

1
1

answered Jun 12 '14 at 11:38

0xmtn

2,625
5
27
53

Try giving the map `position: fixed` in CSS. Setting it to `display: table` and `position:absolute` works as well: http://jsbin.com/zaguraca/1/edit – user2428118 Jun 12 '14 at 11:46
Of course, that's a way too. But what I wondered was Why the hell identical two markups do not operate identically ;) It turned out that they were not identical after all. :) – 0xmtn Jun 12 '14 at 12:17

Google Maps doesn't seen in Jade - HTML works well

1 Answers1

Linked