title: Included jsp file with google map not showing the map
body: <p>I have a jsp page which includes a another jsp file which has a google map. But when I access the parent page the div in which the jsp file is included is getting a CSS property value "overflow: hidden" due to which the map is not shown.</p>
  
  <p>Code for parent jsp:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;link rel="stylesheet" href="&lt;%=request.getContextPath()%&gt;/css/style.css"  /&gt;
  &lt;script src="&lt;%=request.getContextPath()%&gt;/scripts/jquery-1.7.1.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  function showHeatMap(){
    $('#heatDiv').toggle(true);
    $('#exportToCSVHeatMap').removeAttr('disabled');
    $('#dummyFenceMap').style.overflow="visible";
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
        &lt;div id="heatMapDiv" style="display:none"&gt;
    heat map
        &lt;div class="div-inline"&gt;
          &lt;div class="div-daily"&gt;From Date (MM/DD/YYYY)&lt;/div&gt;
          &lt;input type="text" name="fromDateHM" id="datepicker4" class="input-inline" /&gt;
        &lt;/div&gt;
        &lt;div class="div-inline"&gt;
          &lt;div class="div-daily"&gt;To Date (MM/DD/YYYY)&lt;/div&gt;
          &lt;input type="text" name="toDateHM" id="datepicker5" class="input-inline" /&gt;
        &lt;/div&gt;
  
        &lt;div id="buttonDiv"&gt;
          &lt;input type="button" value="Show Heat Map" onclick="showHeatMap()" /&gt;
          &lt;input type="button" value="Export To CSV" id="exportToCSVHeatMap" onclick="exportToCSVHeatMap()" disabled="disabled"/&gt;
        &lt;/div&gt; &lt;!-- buttonDiv --&gt;
  
        &lt;div id="heatDiv" class="heat-map"&gt;
          &lt;div class="div-daily"&gt;Heat Map&lt;/div&gt;
          &lt;div id="heatMap" style="display= block; width= 800px; height= 800px; "&gt;&lt;jsp:include page="../jsp/dummyheatmap.jsp?name=test&amp;id=1001"&gt;&lt;/jsp:include&gt;&lt;/div&gt;
        &lt;/div&gt; &lt;!-- footTraffic --&gt;
    &lt;/div&gt; &lt;!-- heatMapDiv --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Included jsp file code:</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;dummy heat map&lt;/title&gt;
  &lt;link rel="stylesheet" href="&lt;%=request.getContextPath()%&gt;/css/style.css"  /&gt;
  &lt;style type="text/css"&gt;
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #fenceMap { height: 50% }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  /* For Google Map.*/
  
  function googleMapinitialize(){
  var fenceAdd=new google.maps.LatLng(37.2146,121.5545);
  var mapProp = {
          center:fenceAdd,
          zoom:30,
          mapTypeId:google.maps.MapTypeId.TERRAIN
  };
  
  var map = new google.maps.Map(document.getElementById("dummyFenceMap"),mapProp);
  
  var geocoder = new google.maps.Geocoder();
  var location = "2001 Gateway PI, San Jose, CA";
  
  if(!geocoder) {
      geocoder = new google.maps.Geocoder();
  }
  
  var geocoderRequest = {
      address: location
  };
  
  var myCity = null;
  var marker = null;
  var infowindow = null;
  geocoder.geocode(geocoderRequest, function(results, status) {
      if (status =="" || status == google.maps.GeocoderStatus.ZERO_RESULTS){
          alert("'" + location + "' not found!!!");
      } else if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          fenceAdd = new google.maps.LatLng(results[0].geometry.location.hb,results[0].geometry.location.ib);
          if (!marker) {
              marker = new google.maps.Marker({
                  map: map,
                  raiseOnDrag:false,
                  draggable:true
              });
              marker.setPosition(results[0].geometry.location);
              google.maps.event.addListener(marker,'click',function(){
                  if (!infowindow) {
                    infowindow = new google.maps.InfoWindow({
                        disableAutoPan:true,
                        maxWidth:100
                    });
                  }
                  var content = '&lt;strong&gt;' + results[0].formatted_address + '&lt;/strong&gt;';
                  infowindow.setContent(content);
                  infowindow.setPosition(results[0].geometry.location);
                  infowindow.open(map, marker);                   
              });
  
          }
      }
      myCity = new google.maps.Circle({
          center:fenceAdd,
          radius:125,
          strokeColor:"#0000ff",
          strokeOpacity:0.1,
          strokeWeight:0.1,
          fillColor:"#0000ff",
          fillOpacity:0.20,
          map:map
      });
  
      google.maps.event.addListener(map, 'click', function(){
          infowindow.close();
      });
      google.maps.event.addListener(map, 'dblclick', function(){
          window.open("&lt;%=request.getContextPath() %&gt;/jsp/googleMapPopup.jsp?fenceAddress="+$('#haddr').val(),'ADDRESSMAP','height=400,width=600');
      });
      google.maps.event.trigger(map,'resize');
  });
  }
  google.maps.event.addDomListener(window, 'load', googleMapinitialize);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="googleMapinitialize()"&gt;
  &lt;h1&gt;Name : &lt;%=request.getParameter("name")%&gt; &amp; id : &lt;%=request.getParameter("id")%&gt;&lt;/h1&gt;
  &lt;div id="dummyFenceMap" style="height=80%;border:1px solid #ff0000;overflow:visible;"&gt;
  &lt;/div&gt;&lt;!-- new-div-tag2 --&gt;
  &lt;h1&gt;Map end&lt;/h1&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The #heatMap div has a height of 2 / 11px and overflow: hidden. When I edit the overflow property to visible I see the google logo &amp; map type </p>
  
  <p>Can anyone help me what is wrong in my code?</p>