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.
Code for parent jsp:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css" />
<script src="<%=request.getContextPath()%>/scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
function showHeatMap(){
$('#heatDiv').toggle(true);
$('#exportToCSVHeatMap').removeAttr('disabled');
$('#dummyFenceMap').style.overflow="visible";
}
</script>
</head>
<body>
<div id="heatMapDiv" style="display:none">
heat map
<div class="div-inline">
<div class="div-daily">From Date (MM/DD/YYYY)</div>
<input type="text" name="fromDateHM" id="datepicker4" class="input-inline" />
</div>
<div class="div-inline">
<div class="div-daily">To Date (MM/DD/YYYY)</div>
<input type="text" name="toDateHM" id="datepicker5" class="input-inline" />
</div>
<div id="buttonDiv">
<input type="button" value="Show Heat Map" onclick="showHeatMap()" />
<input type="button" value="Export To CSV" id="exportToCSVHeatMap" onclick="exportToCSVHeatMap()" disabled="disabled"/>
</div> <!-- buttonDiv -->
<div id="heatDiv" class="heat-map">
<div class="div-daily">Heat Map</div>
<div id="heatMap" style="display= block; width= 800px; height= 800px; "><jsp:include page="../jsp/dummyheatmap.jsp?name=test&id=1001"></jsp:include></div>
</div> <!-- footTraffic -->
</div> <!-- heatMapDiv -->
</body>
</html>
Included jsp file code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>dummy heat map</title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#fenceMap { height: 50% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/* 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 = '<strong>' + results[0].formatted_address + '</strong>';
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("<%=request.getContextPath() %>/jsp/googleMapPopup.jsp?fenceAddress="+$('#haddr').val(),'ADDRESSMAP','height=400,width=600');
});
google.maps.event.trigger(map,'resize');
});
}
google.maps.event.addDomListener(window, 'load', googleMapinitialize);
</script>
</head>
<body onload="googleMapinitialize()">
<h1>Name : <%=request.getParameter("name")%> & id : <%=request.getParameter("id")%></h1>
<div id="dummyFenceMap" style="height=80%;border:1px solid #ff0000;overflow:visible;">
</div><!-- new-div-tag2 -->
<h1>Map end</h1>
</body>
</html>
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 & map type
Can anyone help me what is wrong in my code?
I solved the issue by adding following style to the included JSP file's 'dummyFenceMap' div.
style="border:1px solid #ff0000;position:relative; left:150px; top:10px; width:500px; height:400px;padding-left:15px;padding-right:15px"
After adding the above style the Map is shown in the embedded JSP file.
But facing a new issue that is - the Google map is shown in 3/4th part of the div rest is blank. But when I resize the browser window the Google Map is redrawn properly. How to resolve this issue?
Related
<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<script>
$(document).ready($(function() {
//Dialog box
$("#dialog").dialog({
autoOpen: false
});
//button to open dialog box
$("#button").click(function(event) {
$("#dialog").dialog("open");
});
});
</script>
<body>
//div containing info about the dialog box
<div id="dialog">
<p>This is supposed to be a calculator</p>
</div>
<input id="button" type="submit" value="Open">
</body>
</html>
Change $(document).ready($(function() { to $(document).ready(function() {
and also check if the braces are properly closed
I am a noob to ASP.NET and MVC so please bear with me, and thank you in advance for the help! --
I am trying to link to a KML file that is stored in the application's root and I cannot get it to work, see below:
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'http://code.google.com/apis/earth/documentation/samples/kml_example2.kml';
var href2 = '~/cngKml.kml'
google.earth.fetchKml(ge, href2, kmlFinishedLoading);
}
It works when I point it to ther 'href' variable, but when I point it to the 'href2' variable it does not load anything.
The full index.cshtml is below:
#{
ViewBag.Title = "STI";
string path = HttpUtility.JavaScriptStringEncode(HttpContext.Current.Server.MapPath("~/kml_example2.kml"));
}
<head>
<title>CNG</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
var ge;
var placemark;
var kmlObject;
google.load("earth", "1", { "other_params": "sensor=false" });
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'http://code.google.com/apis/earth/documentation/samples/kml_example2.kml';
var href2 = '#path';
google.earth.fetchKml(ge, href2, kmlFinishedLoading);
}
function kmlFinishedLoading(obj) {
kmlObject = obj;
if (kmlObject) {
if ('getFeatures' in kmlObject) {
kmlObject.getFeatures().appendChild(placemark);
}
ge.getFeatures().appendChild(kmlObject);
if (kmlObject.getAbstractView())
ge.getView().setAbstractView(kmlObject.getAbstractView());
}
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
</div>
</section>
}
<div id="gearth">
<div id="map3d" style="width:960px; height:640px; align-self:center;"></div>
</div>
Resulting HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>STI</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">sti</p>
</div>
<div class="float-right">
<section id="login">
Hello, <a class="username" href="/Account/Manage" title="Manage">reecea</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="J0EkwX2027gRZ-gDCvH1WMHGpGUnW-Sl2m3jEOpKw2684DUjjywYCFBQ9pPNfJ93pyJIZ9XH9HLMYdFNiVcHohtNsvKA1sIiKf3tL3EekGI1" /> Log off
</form>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>Admin</li>
<li>My Account</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>STI.</h1>
<h2>CNG Stations Map</h2>
</hgroup>
</div>
</section>
<section class="content-wrapper main-content clear-fix">
<head>
<title>CNG</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
var ge;
var placemark;
var kmlObject;
google.load("earth", "1", { "other_params": "sensor=false" });
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'http://code.google.com/apis/earth/documentation/samples/kml_example2.kml';
var href2 = 'c:\\users\\reecea\\documents\\visual studio 2013\\Projects\\CngStationMap\\CngStationMap\\kml_example2.kml';
google.earth.fetchKml(ge, href2, kmlFinishedLoading);
}
function kmlFinishedLoading(obj) {
kmlObject = obj;
if (kmlObject) {
if ('getFeatures' in kmlObject) {
kmlObject.getFeatures().appendChild(placemark);
}
ge.getFeatures().appendChild(kmlObject);
if (kmlObject.getAbstractView())
ge.getView().setAbstractView(kmlObject.getAbstractView());
}
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<div id="gearth">
<div id="map3d" style="width:960px; height:640px; align-self:center;"></div>
</div>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2014 - STI</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-1.8.2.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"9f6ba0e6c2d041d29dcc37b58bbb4ef4"}
</script>
<script type="text/javascript" src="http://localhost:54165/39bfdebe74ed45968bc576a815347820/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Web.Config File:
<system.webServer>
<staticContent>
<remove fileExtension=".kml"/>
<mimeMap fileExtension=".kml" mimeType="application/vnd.google-earth.kml+xml"/>
</staticContent>
Try simply var href2 = '/cngKml.kml'
You can't use physical file paths for links (i.e. Server.MapPath("~/cngKml.kml")).
You can't use paths in client side code that the server needs to resolve either (i.e. "~/anything").
You can't declare a variable in C# and then use it in JavaScript like you attempted. In the case above, you'd need to at least use '#path' (though it still wouldn't work).
Also, please verify that navigating to a kml file on your web server will even work, as unknown file types typically aren't served up by IIS. If this is a problem, you can fix with a web.config entry similar to this SO post, more ref.
Try changing that:
var href2 = path;
to that:
var href2 = #path;
Without # char it is treated as simple JS variable
By the way, if you define variable in C# and then use it in JavaScript, don't forget to use HttpUtility.JavaScriptStringEncode:
string path = HttpUtility.JavaScriptStringEncode(HttpContext.Current.Server.MapPath("~/cngKml.km"));
This question is specific to the design. I have an application that displays positions on a map all works "fine". But now I need to design the user interface, that goes beyond the map (buttons, forms, etc.) these will be located on one side of the map, but under any reason the map is displayed once change some of the CSS page.
I'm a bit desperate since neither my own CSS, or bootstrap (2.3.0), foundation (3.2.5) works. The map simply not displayed, in the console there are no errors. Event in the better case the map is displayed but with graphics glitchs (zoom controls messed, bad markers position, etc) That may be happening and how I can fix this. Will I have to use an iframe? or is there a better solution?
I've readed about max-width: none fix but this is solving nothing. To clarify that I am using the maps are not static.
I can get work perfectly the maps if try with a simple markup and styles
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="/css/styles.css" media="all">
</head>
<body>
<div id="map" class="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
<script src="/js/app.js"></script>
</body>
</html>
styles.css
html, body, .map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
app.js
google.maps.event.addDomListener(window, 'load', function() {
options = {
zoom: 15,
center: new google.maps.LatLng(10.472937,-73.262308),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
});
But obviously it'snt enough for build the application.
A solution that includes the use of iframes, since it seems that is the only way that the map is not affected by the rest of the CSS
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"></div>
<div class="span9">
<iframe id="map_container" src="/map.html" frameborder="0"></iframe>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
map.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<link rel="stylesheet" href="/css/map-styles.css" media="all">
</head>
<body>
<div id="map" class="map_canvas"></div>
</body>
</html>
map-styles.css
html, body, .map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
app.js
google.maps.event.addDomListener(window, 'load', function() {
var options = {
zoom: 15,
center: new google.maps.LatLng(10.472937,-73.262308),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
$iframe = $('#map_container'),
map_el = $iframe.contents().find('#map')[0],
map = new google.maps.Map(map_el, options);
// Match iframe size to parent
$iframe.width($iframe.parent().width());
$iframe.height($iframe.parent().height());
});
I am using Google maps Javascript API. I want to overlay a Bootstrap button on top of map, which will initiate a modal overlay with helpful hints.
The code below works, but the modal button is not on top of the map. Help appreciated.
Here's an example in JSBin: JSBIN
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css'/>
<link href='http://twitter.github.com/bootstrap/assets/css/bootstrap.css' rel='stylesheet' type='text/css' />
<script src='http://code.jquery.com/jquery.min.js'></script>
<script src='http://code.jquery.com/ui/jquery-ui-git.js'></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></script> <!--Load the Google chart AJAX API-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <!-- Google map API -->
<script src='http://twitter.github.com/bootstrap/assets/js/bootstrap.js'></script>
<title>Google Maps</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<!-- MODAL OVERLAY START -->
<a data-toggle='modal' href='#myModal' class='btn btn-info pull-left'><i class='icon-white icon-info-sign'></i> Hint</a>
<div id='myModal' class='modal hide fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
<h3 id='myModalLabel'>Welcome</h3>
</div>
<div class='modal-body'>
<h4>Quick Hints</h4>
<p><small>Blah blah.</small></p>
</div>
<div class='modal-footer'>
<button class='btn' data-dismiss='modal'>Close</button>
</div>
</div>
<!-- MODAL OVERLAY END -->
<div id="map_canvas"></div>
It's not on the map because the map is just another element on the page, and by default all elements are positioned relatively. You can get around this by extending the bootstrap CSS for btn, upping the z-index, and positioning the element absolutely.
Extend the CSS by adding an extra class to your button. Lets call it "my_mo".
.my_mo {
position:absolute;
z-index:2;
}
For this to work, the new CSS has to come after the bootstrap CSS (so the positioning setting is overridden).
I am developing MVC application with Razor syntax.
I am trying to Slidetoggle the Div, means when I click one Div other div should be expanded.
Its work fine after loading, but why its already expanded when page loads ?
but in my application its already expanded/toggled.
How to solve this ?
#model IEnumerable<CRMEntities.Comment>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!DOCTYPE html>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function clearText()
{
document.getElementById('Comment').value = "";
}
</script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".ShowComments").click(function () {
$(".ParentBlock").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.ParentBlock
{
position:relative;
}
div.ShowComments
{
position:relative;
}
</style>
</head>
<body>
#{
<p class="ShowComments">Show Comments</p>
<div class="ParentBlock">
#foreach (var item in Model)
{
<div id="OwnerName">
<span class="EmpName"> #Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { #style = "color:#1A6690;" })</span>
#Html.DisplayFor(ModelItem => item.CommentDateTime)
</div>
<div id="CommentTextBlock">
#Html.DisplayFor(ModelItem => item.CommentText)
</div>
<br />
}
</div>
#Html.TextArea("Comment", "", 5, 80, "asdsd")
<input type="button" value="Add Comment"/>
<input type="button" value="Clear" onclick="clearText()"/>
}
</body>
</html>
The summary of the problem is, Div gets toggled before calling Jscript.
How to avoid it ?
set the divs that should be hidden to hidden with css. this way it will be closed and slide open when you toggle it.