AddressField in RadMultiPage
I'm making use of the CustomAddressField here:
using a RadPageView like so:
<telerik:RadPageView runat="server" id="RadPageView2">
<custom:CustomAddressField runat="server" DataFieldName="Address" IsMapExpanded="true" AddressTemplate="" />
</telerik:RadPageView>
However it doesn't render when you first click the tab. After you click view map to hide and show the map again, the map renders correctly?
Is there anyway to get the map to render property when the tab is clicked?
The same problem occurs if you just use the standard AddressField in a RadTapStrip. I've tried adding Ajax Manager and specifying the TapStrip and Multipage. But that doesn't help
Hi,
I am unable to reproduce this behavior using the stock address field. Can you please inspect the browser developer console (f12 key in Chrome) for any errors after the page is loaded and on the first click. Also can you elaborate further about the actual customization you have done to the AddressField.
Regards,
Velizar Bishurov
Telerik
Hi Velizar,
I've switched back to using the default AddressField, no customization and I still get the error.
I didn't see any errors using the debugger on the browser.
I have a test site running, so you can see the problem:
test.pad4u.com/.../Chatsworth-Road--Manchester-10001014
Then just Click Map, which is just a RadTabStrip, with RadMultiPage.
The code is just:
<telerik:RadPageView runat="server" id="RadPageView2">
<sf:AddressField runat="server" DataFieldName="Address" IsMapExpanded="true" AddressTemplate="" />
</telerik:RadPageView>
Hi Velizar,
Are you now able to reproduce the issue, or should I email the full template so that you can?
Hello,
I am unable to access the link you have provided. Can you please open a support ticket so that we can provide you with a way to get your project to us locally so we can inspect it.
Regards,
Velizar Bishurov
Telerik
Hi Velizar,
Haven't managed to renew support yet, but still trying!
Reading around the problem occurs because of how Google Maps works. If the AddressField is placed in a tab that is not the selected tab, (a non visible tab), then I believe the dimensions are not set on the container and map fails to render.
The work around is to run some javascript on the ontabclick event:
<script>
function OnClientTabSelected(sender, eventArgs)
google.maps.event.trigger(map_canvas_read, 'resize');
</script>
This will make the map render, but then you have the problem of the map is not cantered. Normally you could just save the map centre before the resize and then call something like map.SetCenter, but we can't do that with an AddressField, because I don't have the map object to use.
Same thing happens if you use javascript, like so (unless this is the first tab in a multitab/multipage control, streetview will not render).
<telerik:RadPageView runat="server" id="RadPageView4">
<telerik:RadCodeBlock>
<script>
function initstreetview()
var position = new google.maps.LatLng(<%# Eval("Latitude") %>, <%# Eval("Longitude") %>);
var panoramaOptions =
position: position,
pov:
heading: 165,
pitch: 0
,
zoom: 1
;
var myPano = new google.maps.StreetViewPanorama(
document.getElementById('street-canvas'),
panoramaOptions);
myPano.setVisible(true);
google.maps.event.addDomListener(window, 'load', initstreetview);
</script>
</telerik:RadCodeBlock>
<div id="street-canvas" style="height: 400px;"></div>
</telerik:RadPageView>
However, you can fix this easily in javascript by calling this on selectedtab:
However, with the addressField I don't have access to the map, or it's not called map. If I were to do map.SetZoom, I would get a map is undefined error. Is there a variable for the addressField map that I can use in javascript?
function resizeMap(sender, args)
var tab = args.get_tab();
if (tab.get_text() == 'Streetview')
google.maps.event.trigger(myPano,'resize');
myPano.setZoom(myPano.getZoom() );