This project is read-only.

GoogleMap in AJAX Tab Control

Mar 31, 2009 at 10:04 PM
Hello,

I have been using the GoogleMap control for a while now, and it has generally been an excellent tool. I have noticed a few comments on issues with putting the GoogleMap control in an AJAX Tab control. I have tried the suggestions, but I still have problems with the map not completely rendering, and the marker appearing off the screen (upper left of the map). Also, in design view, I get the following error:

Error rendering control. The control collection cannot be modified during Databind, Init, Load, Prerender, or Unload phases.

Maybe I'm not following the directions of how to fix this properly. I have downloaded the newest version (3.5), and made sure to set the width/height in pixels (Width="600px").

Please let me know if there is some way to fix these issues.

Thanks!
Apr 1, 2009 at 7:56 AM
Hi,

Check out this discussions:
http://googlemap.codeplex.com/Thread/View.aspx?ThreadId=32360

Basically you have to invoke checkResize() of the GoogleMap when switching to the GoogleMap control tab.

In a simple line of code, if your control ID is GoogleMap1 it should looks like:

<%= GoogleMap1.ClientID %>.checkResize();

I will thing about solving that issue inside the control implementation in the next version.

Regards
Apr 1, 2009 at 1:57 PM
Thanks for responding, Velio. Unfortunately, I still can't get it working properly. Do you mean for the tab control to invoke checkResize(), like this?

 

<cc2:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3" Width="600px" Height="400px" OnClientClick=<%= GM1.ClientID %>.checkResize();>

 


I get an error message when I use the above method. Sorry -- I must not be understanding properly. Could you please provide a complete sample?

Thanks!

 

 

Apr 1, 2009 at 4:14 PM
Thanks for your help, Velio.

I got it working. For some reason, the AJAX tab control doesn't like parens() when invoking the function, so I had to split it up into 2 separate functions. Which is unfortunate, since I couldn't find a way to pass the ClientID to the function -- otherwise, the tabs appeared completely blank. Here's the code:

 

<cc2:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3" Width="600px" Height="400px" OnClientClick="ResetMapDelay">

 

<

script language="javascript" type="text/javascript">

 

 

function ResetMap(){

 

 

var vGM = <%=GM1.ClientID %>

 

 

var newLat = vGM.GMap.getCenter().lat();

 

 

var newLng = vGM.GMap.getCenter().lng();

 

 

var newZoom = vGM.GMap.getZoom();

 

vGM.checkResize();

vGM.GMap.setCenter(

new GLatLng(newLat,newLng), newZoom);

 

}

 

 

function ResetMapDelay(){

 

setTimeout(

'ResetMap()',50);

 

}

 

 

 

</

script>

 

Apr 1, 2009 at 9:06 PM
Welcome,

I have added a sample page for that issue in the new SampleWebSite and will available in next release.
The page is online at http://googlemap.artembg.com/map/InTabPanel.aspx

Regards
Apr 30, 2009 at 9:50 PM
Hello.

I followed all the instructions to put the control inside a webpage but at runtime i only see a gray rectangle and looking in the firerox error console i see the msg "a is null".

In web.config i have
<add tagPrefix="artem" namespace="Artem.Web.UI.Controls" assembly="Artem.GoogleMap"/>

and in the aspx file i put
<%@ Register assembly="Artem.GoogleMap" namespace="Artem.Web.UI.Controls" tagprefix="artem" %>
            <artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Key="ABQIAAAAVKC9nynfC_w9S2oBoOyfXhSwvQaQPmnNSVOVUro-NLu7kcJF4RRgLWkfWD7qtVRmtoeFkaX44GYy6A" Longitude="44" Latitude="44" Zoom ="2"></artem:GoogleMap>

One fact about what i am doing is that i am putting the control inside another user control  so the final code is:

<div id="ctl00_cntBody_ctlListView_GoogleMap1" style="height:600px;width:800px;">
</div>
<div id="ctl00_cntBody_ctlListView_GoogleMap1_Templates" style="display:none;"></div>
<input id="ctl00_cntBody_ctlListView_GoogleMap1_State"
name="ctl00_cntBody_ctlListView_GoogleMap1_State" type="hidden" />
My environment is VS 2005, c#, net 2.0 runtime
May 12, 2009 at 6:24 AM

Thanks velio axeman10001,

Your solution got me going again. 

But , I think the information provided on  http://googlemap.artembg.com/map/InTabPanel.aspx is not right (atleast in latest version 4.1).

I foun that 

    <script type="text/javascript">
        function refreshMap() {
            var map = <%= GoogleMap1.ClientID %>;
            map.checkResize();
        }
    </script>

 

infact should be :

 

    <script type="text/javascript">
        function refreshMap() {
            var map = <%= GoogleMap1.ID %>;
            map.checkResize();
        }
    </script>

After doing above mentioned change I still found the map is repositioned as the center of map moves to left top corner (as of today this problem is still there on  http://googlemap.artembg.com/map/InTabPanel.aspx) but thanks to code by axeman10001 that solved this problem. So the final code that code for me is as follows:

 

                    <ajaxToolkit:TabContainer ID="tcResult" runat="server" Width="545px" OnClientActiveTabChanged="refreshMap">
                        <ajaxToolkit:TabPanel ID="tpListView" runat="server" HeaderText="List View">
                            <ContentTemplate>
                                Some text ...
                            </ContentTemplate>
                        </ajaxToolkit:TabPanel>
                        <ajaxToolkit:TabPanel ID="tpMapView" runat="server" HeaderText="Map View">
                            <ContentTemplate>
                                <artem:GoogleMap ID="GoogleMap1" runat="server" Width="525px" Height="300px"
BorderStyle="Solid" BorderColor="#999999" BorderWidth="1" /> </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> <script type="text/javascript"> function refreshMap() { var map = <%= GoogleMap1.ID %>;
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>

 

May 12, 2009 at 9:22 AM

Hi,

You are right. This sample is for the old version of GoogleMap control.
From version 4.0 you can reference the GoogleMap control javascript object with same name like its ID is.

In the above code of yours you can, as well, use following:

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

You don't have to use the "ugly" syntax like <%= GoogleMap1.ID %> any more.

Check out the new features list in Release 4.0 and 4.0 beta.

Regards

May 22, 2009 at 3:48 PM

Hi Velio,

I've downloaded the source bits (31229) as the other downloads weren't working for some reason, and I'm getting the same issue as Lefajardo.

I'm using the control in the most basic way possible, not inside a tabpanel or anything, this is the only thing on the page:

        <google:GoogleMap runat="server" id="map" Width="300px" Height="230px"  >
            <Markers>
                <google:GoogleMarker Title="Hello World" Latitude="52.371722" Longitude="4.900342" />
            </Markers>
        </google:GoogleMap>

Any suggestions are welcome, or should I just download another source build latest version?

Thanks,

May 22, 2009 at 6:11 PM

Ok, I guess the google:GoogleMap was just missing values for the "Latitude" and "Longitude" properties. It works now.

Jun 19, 2009 at 3:51 PM

I'm having the same issue with a GoogleMap control inside a ModalPopup, but there is no client side event for me to hook into that I know of.  Is there something I'm missing?