google map not appearing correctly in tabpanel

Question

3.50/5 (2 votes)

See more:

hi!
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

XML

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

    <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>
    </span>
    <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"
          OnPageIndexChanging="GridView1_PageIndexChanging"
         Font-Size="9pt"   GridLines="None" ShowHeader="False">


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

                />
                <PagerSettings
                 Visible="true"  Mode="NextPrevious"
                 NextPageImageUrl="images/nxt.png"
                 PreviousPageImageUrl="images/back.png" />




                    <asp:TemplateField>

                          <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
                          </td></tr></table></td></tr></table><br/>

aspx.cs

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>";
    GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP2);
}

[edit]Code moved from OP comment into question, Code Blocks added - OriginalGriff[/edit]
[edit2]Duplicate code removed - OriginalGriff[/edit2]

Posted 21-May-11 20:17pm

hinzhonee

Updated 21-May-11 22:08pm

OriginalGriff

v3

Add a Solution

Comments

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Hossein Montazeri · Answer 1 · 2011-05-22T18:14:00

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

<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.