Click here to Skip to main content
15,884,010 members
Please Sign up or sign in to vote.
3.50/5 (2 votes)
See more:
i want to show google map in tab panel of tab container.but it is not showing properly.if i put it in 1st tab panel it works fine but when i put it in other panel it move half way left..only half of the map is shown...can u tell me how to fix this problem..i tried to put it in 1st tab panel and put the 2nd tab panel as a active tab then even then its not showing the map properly.i dont want to show map it in 1st tab panel

<asp:TabContainer ID="TabContainer2" runat="server" Width="640px" CssClass="NewsTab" BorderStyle="Double">
 <asp:TabPanel runat="server" ID="mappanel"

    <asp:Panel ID="Panel3" runat="server">

         <uc1:GoogleMapForASPNet ID="GoogleMapForASPNet1"  runat="server" />

    <asp:TabPanel runat="server" ID="TabPanel5"
        HeaderText="Property Listing">

   <asp:Panel ID="deaultsearchlistpanel" runat="server">
    <span style="color:#ff6622">
    <div id="Results"  runat="server" ></div>
    <asp:GridView ID="propertylistings" runat="server" AutoGenerateColumns="False"
     CssClass="grid-view" BorderWidth="2px" OnRowCreated="gvHover_RowCreated"
     CellPadding="2" Font-Bold="False" Font-Names="Arial" AllowPaging="true"
     PagerSettings-Visible="true" PageSize="2"
         Font-Size="9pt"   GridLines="None" ShowHeader="False">

               <PagerStyle HorizontalAlign=
               "Center" ForeColor="White" Font-Size="Large" BorderStyle="solid"

                 Visible="true"  Mode="NextPrevious"
                 PreviousPageImageUrl="images/back.png" />


                          <table width='600px' border='1'> <tr ><td colspan='2'><%#Eval("Title")%></td></tr><tr><td><img alt='<%#Eval("Title")%>'  width='90' height='90' src='<%#Eval("ImageName")%>' border='0' /></td><td><%#Eval("Description")%><br/> <br/>Total Area: <%#Eval("TotalArea")%><br/>Status: <%#Eval("Status")%></td></tr><tr><td colspan='2' ><table border='1' ><tr><td ><%#Eval("bid")%> </td><td>

                          <asp:HyperLink ID="details" Text="View Details" runat="server" Target="_search"
                          NavigateUrl='<%# "DetailDescription.aspx?p_id=" + Eval("PropertyID") + "&prop_type=" + Server.UrlEncode(Eval("PropertyType").ToString())  + "&AgentID=" + Eval("AgentID")%>' />
                            </td><td>  Post Comment


GoogleMapForASPNet1.GoogleMapObject.APIKey = ConfigurationManager.AppSettings["GoogleAPIKey"];
GoogleMapForASPNet1.GoogleMapObject.APIVersion = "5";
GoogleMapForASPNet1.GoogleMapObject.Width = "600px";
GoogleMapForASPNet1.GoogleMapObject.Height = "600px";
GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;
GoogleMapForASPNet1.GoogleMapObject.CenterPoint = new GooglePoint("CenterPoint", 33.586452327684200, 73.106203079223600);
DataSet ds = (DataSet)Session["obj"];

foreach (DataRow dRow in ds.Tables[0].Rows)
    GoogleMapForASPNet1.GoogleMapObject.CenterPoint = new GooglePoint("CenterPoint", Convert.ToDouble(dRow["Latitude"]), Convert.ToDouble(dRow["Longitude"]));
    GoogleMapForASPNet1.GoogleMapObject.APIKey = ConfigurationManager.AppSettings["GoogleAPIKey"];
    GoogleMapForASPNet1.GoogleMapObject.Width = "500px"; // You can also specify percentage(e.g. 80%) here
    GoogleMapForASPNet1.GoogleMapObject.Height = "500px";
    GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;
    GooglePoint GP2 = new GooglePoint();
    GP2.ID = "SimplePushpin";
    GP2.Latitude = Convert.ToDouble(dRow["Latitude"]);
    GP2.Longitude = Convert.ToDouble(dRow["Longitude"]);
    GP2.InfoHTML = "<table cellspacing='5'><tr><td colspan='2'>" + dRow["Address"].ToString() + "</td></tr><tr><td><img height='90' width='90' src='" + dRow["ImageName"].ToString() + "'border='0' /></td><td valign='top'>price:  " + dRow["Price"].ToString() + "<br>Area:  " + dRow["TotalArea"].ToString() + "<br>City:  " + dRow["City"].ToString() + "</td></tr></table>";

[edit]Code moved from OP comment into question, Code Blocks added - OriginalGriff[/edit]
[edit2]Duplicate code removed - OriginalGriff[/edit2]
Updated 21-May-11 22:08pm
Pong D. Panda 22-May-11 2:51am    
Either you learn more about HTML or post some of your codes for us to be able to help.
OriginalGriff 22-May-11 4:09am    
In future, please use the "Improve question" widget to add information like that: it means you can use code blocks and make things a lot more readable!
I have moved it for you, and deleted your two comments with just code in.

1 solution

I assume GoogleMapForASPNet is a custom control you have and has a javascript method which initializes the map (like loadMap(), initMap() or DrawGoogleMap() as in Shabdar's article or ...) then add OnClientClick attribute to the tab containing googlemap:
<asp:panel id="Panel3" runat="server" OnClientClick="DrawGoogleMap">

which DrawGoogleMap() should be the actual function that initializes your map and remember not to include parentheses here.
This makes the map being shown when user clicks on the tab.
And don't be surprised when it works despite the fact the caller and callee are in different controls. It happens because in actual rendered page you can access all javascript functions by their original name.
And one last hint is that you can use a hiddenfield to save a value indicating whether the map has already been initialized or not so every time the user reopens the tab, the map doesn't blink and reset to it's initial location.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900