+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / AddressField in RadMultiPage

AddressField in RadMultiPage

9 posts, 0 answered
  1. David
    David avatar
    114 posts
    Registered:
    19 Jul 2012
    03 Jul 2015
    Link to this post

    I'm making use of the CustomAddressField here:

    http://www.sitefinity.com/developer-network/forums/developing-with-sitefinity-/how-to-customize-the-google-maps-widget-that-comes-with-dynamic-content-(telerik-sitefinity-web-ui-fields-addressfield-)

    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?

     

     

  2. David
    David avatar
    114 posts
    Registered:
    19 Jul 2012
    07 Jul 2015 in reply to David
    Link to this post
    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
  3. Velizar Bishurov
    Velizar Bishurov avatar
    143 posts
    Registered:
    01 Dec 2016
    08 Jul 2015
    Link to this post
    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
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  4. David
    David avatar
    114 posts
    Registered:
    19 Jul 2012
    08 Jul 2015 in reply to Velizar Bishurov
    Link to this post

    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:

     http://test.pad4u.com/property/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>​

  5. David
    David avatar
    114 posts
    Registered:
    19 Jul 2012
    13 Jul 2015
    Link to this post

    Hi Velizar,

    Are you now able to reproduce the issue, or should I email the full template so that you can?

  6. Velizar Bishurov
    Velizar Bishurov avatar
    143 posts
    Registered:
    01 Dec 2016
    13 Jul 2015
    Link to this post
    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
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  7. David
    David avatar
    114 posts
    Registered:
    19 Jul 2012
    15 Jul 2015 in reply to Velizar Bishurov
    Link to this post

    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.

     

  8. David
    David avatar
    114 posts
    Registered:
    19 Jul 2012
    23 Jul 2015
    Link to this post

    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>

  9. David
    David avatar
    114 posts
    Registered:
    19 Jul 2012
    23 Jul 2015 in reply to David
    Link to this post

    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() );
    }
    }

9 posts, 0 answered