Hi, Telerik.
Please help, google map wont fill whole RadTab. I tried
<div id="map_canvas" style="width: 100%; height: 100%; margin: 0px;"/>
i also tried
<div id="map_canvas" style="width: auto; height: auto; margin: 0px;"/>
Map only shows if width and height is in px,
I just want the map to scale to fit the RadTab so that when a panel is collapsed, the map fills the new space. Is it a CSS issue?
Please help.
here is the whole code.
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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 id="Head1" runat="server">
<title>Map Demo</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
Orientation="Horizontal" Skin="Black" LiveResize="true" VisibleDuringInit="false"
ResizeWithBrowserWindow="true">
<telerik:RadPane ID="TitleBarPane" runat="server" Locked="true" Height="35px"
CssClass="TitleBarPane">
<div id="TitleBar">
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="TitleRadSplitBar" runat="server" Height="100%" Width="100%" />
<telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">
<telerik:RadSplitter ID="ContentRadSplitter" runat="server" Skin="Black">
<telerik:RadPane ID="LeftRadPane" runat="server" Width="230" Scrolling="None">
<asp:UpdatePanel ID="updTest" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="label3" Text="Some text here" runat="server" Style="position: absolute; color: Red;
left: 20px; bottom: 50px; z-index: 100;" />
</ContentTemplate>
</asp:UpdatePanel>
</telerik:RadPane>
<telerik:RadSplitBar ID="NavRadSplitBar" runat="server" CollapseMode="Forward" />
<telerik:RadPane ID="MapRadPane" runat="server" Scrolling="None">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="always">
<ContentTemplate>
<telerik:RadSplitter ID="MapDivSplitter" runat="server" Orientation="Horizontal"
Skin="Black" LiveResize="true" VisibleDuringInit="false">
<telerik:RadPane ID="MapPane" runat="server" Scrolling="None">
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0">
<Tabs>
<telerik:RadTab Text="Google Map"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" >
<telerik:RadPageView ID="RadPageView1" runat="server" Height="100%" Width="100%">
<br />
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?v=3.3&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
//initialization
function initialize() {
var latLng = new google.maps.LatLng(51.445517, -0.412006);
//geocode init
var geocoder = new google.maps.Geocoder();
//map options
var myMapOptions =
{
zoom: 10,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//initialize map
var map = new google.maps.Map(document.getElementById('mapDiv'), myMapOptions );
//create makers
var marker = new google.maps.Markers(
{ position: latLng,
map: map,
dgrabble: true
});
}
</script>
<div id="mapDiv" style="width: 750px; height: 650px; margin: 0px;"/>
</telerik:RadScriptBlock>
</telerik:RadPageView>
</telerik:RadMultiPage>
</telerik:RadPane>
<telerik:RadSplitBar ID="MapRadSplitBar" runat="server"
CollapseMode="Backward" />
<telerik:RadPane ID="DataGridPane" runat="server" Height="130" Scrolling="Both"
MinHeight="150">
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar1" Runat="server" Enabled="False">
</telerik:RadSplitBar>
</telerik:RadSplitter>
</ContentTemplate>
</asp:UpdatePanel>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</form>
</body>
</html>
Please help, google map wont fill whole RadTab. I tried
<div id="map_canvas" style="width: 100%; height: 100%; margin: 0px;"/>
i also tried
<div id="map_canvas" style="width: auto; height: auto; margin: 0px;"/>
Map only shows if width and height is in px,
I just want the map to scale to fit the RadTab so that when a panel is collapsed, the map fills the new space. Is it a CSS issue?
Please help.
here is the whole code.
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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 id="Head1" runat="server">
<title>Map Demo</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
Orientation="Horizontal" Skin="Black" LiveResize="true" VisibleDuringInit="false"
ResizeWithBrowserWindow="true">
<telerik:RadPane ID="TitleBarPane" runat="server" Locked="true" Height="35px"
CssClass="TitleBarPane">
<div id="TitleBar">
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="TitleRadSplitBar" runat="server" Height="100%" Width="100%" />
<telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">
<telerik:RadSplitter ID="ContentRadSplitter" runat="server" Skin="Black">
<telerik:RadPane ID="LeftRadPane" runat="server" Width="230" Scrolling="None">
<asp:UpdatePanel ID="updTest" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="label3" Text="Some text here" runat="server" Style="position: absolute; color: Red;
left: 20px; bottom: 50px; z-index: 100;" />
</ContentTemplate>
</asp:UpdatePanel>
</telerik:RadPane>
<telerik:RadSplitBar ID="NavRadSplitBar" runat="server" CollapseMode="Forward" />
<telerik:RadPane ID="MapRadPane" runat="server" Scrolling="None">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="always">
<ContentTemplate>
<telerik:RadSplitter ID="MapDivSplitter" runat="server" Orientation="Horizontal"
Skin="Black" LiveResize="true" VisibleDuringInit="false">
<telerik:RadPane ID="MapPane" runat="server" Scrolling="None">
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0">
<Tabs>
<telerik:RadTab Text="Google Map"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" >
<telerik:RadPageView ID="RadPageView1" runat="server" Height="100%" Width="100%">
<br />
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?v=3.3&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
//initialization
function initialize() {
var latLng = new google.maps.LatLng(51.445517, -0.412006);
//geocode init
var geocoder = new google.maps.Geocoder();
//map options
var myMapOptions =
{
zoom: 10,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//initialize map
var map = new google.maps.Map(document.getElementById('mapDiv'), myMapOptions );
//create makers
var marker = new google.maps.Markers(
{ position: latLng,
map: map,
dgrabble: true
});
}
</script>
<div id="mapDiv" style="width: 750px; height: 650px; margin: 0px;"/>
</telerik:RadScriptBlock>
</telerik:RadPageView>
</telerik:RadMultiPage>
</telerik:RadPane>
<telerik:RadSplitBar ID="MapRadSplitBar" runat="server"
CollapseMode="Backward" />
<telerik:RadPane ID="DataGridPane" runat="server" Height="130" Scrolling="Both"
MinHeight="150">
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar1" Runat="server" Enabled="False">
</telerik:RadSplitBar>
</telerik:RadSplitter>
</ContentTemplate>
</asp:UpdatePanel>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</form>
</body>
</html>
1 Answer, 1 is accepted
0
Hello Fugu,
I'm not exactly sure what is the exact problem. The following code works at our side:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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 id="Head1" runat="server">
<title>Map Demo</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
Orientation="Horizontal" Skin="Black" LiveResize="true" VisibleDuringInit="false"
ResizeWithBrowserWindow="true">
<telerik:RadPane ID="TitleBarPane" runat="server" Locked="true" Height="35px"
CssClass="TitleBarPane">
<div id="TitleBar">
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="TitleRadSplitBar" runat="server" Height="100%" Width="100%" />
<telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">
<telerik:RadSplitter ID="ContentRadSplitter" runat="server" Skin="Black">
<telerik:RadPane ID="LeftRadPane" runat="server" Width="230" Scrolling="None">
<asp:UpdatePanel ID="updTest" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="label3" Text="Some text here" runat="server" Style="position: absolute; color: Red;
left: 20px; bottom: 50px; z-index: 100;" />
</ContentTemplate>
</asp:UpdatePanel>
</telerik:RadPane>
<telerik:RadSplitBar ID="NavRadSplitBar" runat="server" CollapseMode="Forward" />
<telerik:RadPane ID="MapRadPane" runat="server" Scrolling="None">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="always">
<ContentTemplate>
<telerik:RadSplitter ID="MapDivSplitter" runat="server" Orientation="Horizontal"
Skin="Black" LiveResize="true" VisibleDuringInit="false">
<telerik:RadPane ID="MapPane" runat="server" Scrolling="None">
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0">
<Tabs>
<telerik:RadTab Text="Google Map"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" >
<telerik:RadPageView ID="RadPageView1" runat="server" Height="100%" Width="100%" Selected="true">
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<div id="mapDiv" style="width: 750px; height: 650px; margin: 0px;"/>
<script type="text/javascript">
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?v=3.3&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
//initialization
function initialize() {
var latLng = new google.maps.LatLng(51.445517, -0.412006);
//geocode init
var geocoder = new google.maps.Geocoder();
//map options
var myMapOptions =
{
zoom: 10,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//initialize map
var map = new google.maps.Map(document.getElementById('mapDiv'), myMapOptions);
//create makers
var marker = new google.maps.Marker({ position: latLng, map: map, title: "43201" });
}
</script>
</telerik:RadScriptBlock>
</telerik:RadPageView>
</telerik:RadMultiPage>
</telerik:RadPane>
<telerik:RadSplitBar ID="MapRadSplitBar" runat="server"
CollapseMode="Backward" />
<telerik:RadPane ID="DataGridPane" runat="server" Height="130" Scrolling="Both"
MinHeight="150">
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar1" Runat="server" Enabled="False">
</telerik:RadSplitBar>
</telerik:RadSplitter>
</ContentTemplate>
</asp:UpdatePanel>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</form>
</body>
</html>
Does it work at your side?
Regards,
Helen
the Telerik team
I'm not exactly sure what is the exact problem. The following code works at our side:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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 id="Head1" runat="server">
<title>Map Demo</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
Orientation="Horizontal" Skin="Black" LiveResize="true" VisibleDuringInit="false"
ResizeWithBrowserWindow="true">
<telerik:RadPane ID="TitleBarPane" runat="server" Locked="true" Height="35px"
CssClass="TitleBarPane">
<div id="TitleBar">
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="TitleRadSplitBar" runat="server" Height="100%" Width="100%" />
<telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">
<telerik:RadSplitter ID="ContentRadSplitter" runat="server" Skin="Black">
<telerik:RadPane ID="LeftRadPane" runat="server" Width="230" Scrolling="None">
<asp:UpdatePanel ID="updTest" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="label3" Text="Some text here" runat="server" Style="position: absolute; color: Red;
left: 20px; bottom: 50px; z-index: 100;" />
</ContentTemplate>
</asp:UpdatePanel>
</telerik:RadPane>
<telerik:RadSplitBar ID="NavRadSplitBar" runat="server" CollapseMode="Forward" />
<telerik:RadPane ID="MapRadPane" runat="server" Scrolling="None">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="always">
<ContentTemplate>
<telerik:RadSplitter ID="MapDivSplitter" runat="server" Orientation="Horizontal"
Skin="Black" LiveResize="true" VisibleDuringInit="false">
<telerik:RadPane ID="MapPane" runat="server" Scrolling="None">
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0">
<Tabs>
<telerik:RadTab Text="Google Map"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" >
<telerik:RadPageView ID="RadPageView1" runat="server" Height="100%" Width="100%" Selected="true">
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<div id="mapDiv" style="width: 750px; height: 650px; margin: 0px;"/>
<script type="text/javascript">
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?v=3.3&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
//initialization
function initialize() {
var latLng = new google.maps.LatLng(51.445517, -0.412006);
//geocode init
var geocoder = new google.maps.Geocoder();
//map options
var myMapOptions =
{
zoom: 10,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//initialize map
var map = new google.maps.Map(document.getElementById('mapDiv'), myMapOptions);
//create makers
var marker = new google.maps.Marker({ position: latLng, map: map, title: "43201" });
}
</script>
</telerik:RadScriptBlock>
</telerik:RadPageView>
</telerik:RadMultiPage>
</telerik:RadPane>
<telerik:RadSplitBar ID="MapRadSplitBar" runat="server"
CollapseMode="Backward" />
<telerik:RadPane ID="DataGridPane" runat="server" Height="130" Scrolling="Both"
MinHeight="150">
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar1" Runat="server" Enabled="False">
</telerik:RadSplitBar>
</telerik:RadSplitter>
</ContentTemplate>
</asp:UpdatePanel>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</form>
</body>
</html>
Does it work at your side?
Regards,
Helen
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.