Version 4.1 Tabview - Centering Map Problems

Jun 24, 2011 at 9:32 AM
Edited Jun 25, 2011 at 9:34 AM

Hi all, I'm looking at version 4.1 as I have a separate issue with version 5 covered in another post.  The issue I am finding is that the map does not seem to center on the latitude and longitude variables I stick in.  I can add a marker with the same values that appear at the correct spot.  This is a little frustrating, so hope someone can shed some light on  the problem as I notice this forum is kinda slow.

Coming back to the issue now, I've created a bare bone page as shown below, with code behind that simply sets a marker at the co-ordinates.  I have one map inside the tab panel and the other on the outside.  The map outside is centered at the correct point, however the map inside the tab panel is off by a large amount.

OK, found a posting that gave some more informationinto how to fix the issue.  For the convenience of others I've included the java code below.

 

    <script type="text/javascript">
        function refreshMap() {
            var map = GoogleMap1;

            var newLat = map.GMap.getCenter().lat();
            var newLng = map.GMap.getCenter().lng();
            var newZoom = map.GMap.getZoom();
            map.checkResize();
            map.GMap.setCenter(new GLatLng(newLat, newLng), newZoom);
        }
    </script>

 

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TabTest.aspx.vb" Inherits="DiveBuddy.TabTest" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajaxToolkit:ToolkitScriptManager>
       
    <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Height="300px" Visible="true" Width="750px" ActiveTabIndex="0" ScrollBars="Vertical" OnClientActiveTabChanged="refreshMap">
        <ajaxToolkit:TabPanel HeaderText="General Information" runat="server" ID="Panel_General">
            <ContentTemplate>
                Blahh                       
            </ContentTemplate>
        </ajaxToolkit:TabPanel>

        <ajaxToolkit:TabPanel HeaderText="Detailed Site Description" runat="server" ID="Panel_Description">
            <ContentTemplate>

            </ContentTemplate>
        </ajaxToolkit:TabPanel>

        <ajaxToolkit:TabPanel HeaderText="Site Images" runat="server" ID="Panel_SiteImages">
            <ContentTemplate>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>

        <ajaxToolkit:TabPanel HeaderText="Google Maps View" runat="server" ID="Panel_GoogleMaps">
            <ContentTemplate>
                <div style="position: relative">
                    <artem:GoogleMap ID="GoogleMap1" runat="server" Width="690px" Height="290px" Latitude="-33.9919667"
                        Longitude="151.2313833" Zoom="16" ShowScaleControl="true" EnableMarkerManager="true"
                        ZoomPanType="Large" Key="ABQIAAAAD5n-HqxpHF-_IRKm-3LctxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRquq9VLao24-ws_XndULzmb4eI8A" DefaultMapView="Hybrid" InsideUpdatePanel="True">
                    </artem:GoogleMap>
                   
                </div>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>


        <ajaxToolkit:TabPanel HeaderText="Member Comments" runat="server" ID="Panel_Comments">
            <ContentTemplate>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>

    </ajaxToolkit:TabContainer>

   
    <artem:GoogleMap ID="GoogleMap2" runat="server" Width="690px" Height="290px" Latitude="-33.9919667"
        Longitude="151.2313833" Zoom="16" ShowScaleControl="true" EnableMarkerManager="true"
        ZoomPanType="Large" Key="ABQIAAAAD5n-HqxpHF-_IRKm-3LctxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRquq9VLao24-ws_XndULzmb4eI8A" DefaultMapView="Hybrid">
    </artem:GoogleMap>

       
    <script type="text/javascript">
        function refreshMap() {
            var map = GoogleMap1;
            map.checkResize();
        }
    </script>
   
    </div>
    </form>
</body>
</html>

 

Cheers,
Paul

Oct 24, 2012 at 7:22 PM

just do this without any jscript. You can either refresh with new data or just render the dataview and refresh the googlemap

ASP

<asp:TabContainer ID="tcResult" runat="server" Width="895px"  CssClass="MyTabStyle" ActiveTabIndex="0" OnActiveTabChanged="tcResult_ActiveTabChanged" AutoPostBack="true">

....

 

VB.net

Protected Sub tcResult_ActiveTabChanged(sender As Object, e As System.EventArgs) Handles tcResult.ActiveTabChanged
    End Sub