Databases
StackOverflow2013
Postsdbo
POIncluded jsp file with google map not showing the map
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIncluded jsp file with google map not showing the map
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload