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

Forums / Developing with Sitefinity / How to customize the Google Maps widget that comes with dynamic content (Telerik.Sitefinity.Web.UI.Fields.AddressField )

How to customize the Google Maps widget that comes with dynamic content (Telerik.Sitefinity.Web.UI.Fields.AddressField )

4 posts, 0 answered
  1. antoniodlp
    antoniodlp avatar
    13 posts
    Registered:
    28 Mar 2007
    03 Jul 2013
    Link to this post
    Hi I created an Address field in a custom module and set it to use Google Maps to impress a customer with the new abilities of Sitefinity, so far so good, can add the address and the map in the item detail widget but there seems to be no way to set the map width or height, or the zoom level or anything. 

    This is the relevant field in the widget template, I already modified it to just show the map but there doesn't seem to be anything else I can do and I can't find documentation:

    <sf:AddressField runat="server" DataFieldName="Address" IsMapExpanded="true" AddressTemplate="" />


    It generates something like this with hardcoded width and height to 500px:

    <div id="map_canvas_read" style="width: 500px; height: 500px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0);">
    {{MAP STUFF HERE}}
    </div>


    What can I do? Should I dispose of this functionality and continue with my own implementation?
  2. antoniodlp
    antoniodlp avatar
    13 posts
    Registered:
    28 Mar 2007
    03 Jul 2013 in reply to antoniodlp
    Link to this post
    I managed to set the height and width (to 250px) with this CSS:

    #map_canvas_read { height: 250px !important;width: 250px !important;}

    But it feels like a hack and I would still like to customize more, e.g. zoom level, initial view, what the "Show map" link should say, etc...
  3. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    05 Jul 2013
    Link to this post
    Hello Antonio,

    Thank you for contacting us. 

    In order to achieve the desired functionality and have more control over the height, width, zoom etc you will need to create a custom AddressField control by inheriting from ours and also customize its template.

    Here is how you can control the zoom level from the code file:

    protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
            {
                if (this.AddressData != null)
                {
                    this.AddressData.MapZoomLevel = 2; // 2 is minimum (farthest) and 16 is maximum (closest)
                }
                base.InitializeControls(container);
                 
            }

    Here is how the default template of the AddressField control looks like:
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sfFields" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
        <templates>
            <sf:ConditionalTemplate ID="ConditionalTemplate1" Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
                <asp:Panel ID="formOnlyContainer_read" runat="server">
                    <div class="sfitemAddressTxtWrp">
                        <sf:SitefinityLabel ID="address_read" runat="server" WrapperTagName="div" CssClass="sfitemAddressTxt"></sf:SitefinityLabel>
                    </div>
                </asp:Panel>
     
                <asp:Panel ID="mapOnlyContainer_read" runat="server">
                    <asp:LinkButton ID="showMapButton" runat="server" Text="View map" OnClientClick="return false;" CssClass="sfitemViewMapLnk"></asp:LinkButton>
                    <div id="map_wrapper_read" style="display:none;" class="sfitemAddressMapWrp">
                        <div id="map_canvas_read" style="width:1000px; height:1000px"></div>
                    </div>
                </asp:Panel>
            </sf:ConditionalTemplate>
            <sf:ConditionalTemplate ID="ConditionalTemplate2" Left="DisplayMode" Operator="Equal" Right="Write" runat="server">
                <asp:Panel ID="apiKeyErrorPanel_write" runat="server" Visible="false" CssClass="sfNeutral">
                    <p>
                        <asp:Literal ID="Literal1" Text="<%$Resources:AddressFieldResources, MissingApiKeyDescription %>" runat="server" ></asp:Literal>
                    </p>
                    <p>
                        <asp:Literal ID="Literal2" Text="<%$Resources:AddressFieldResources, MissingApiKeyDescriptionSettings %>" runat="server" ></asp:Literal><br />
                        <a id="googleMapsSettingsBtn" target="_blank" class="sfMoreDetails">
                            <i><asp:Literal ID="Literal3" runat="server" Text='<%$Resources:AddressFieldResources, GoogleMapsLinkText %>'></asp:Literal></i>
                        </a>
                    </p>
                </asp:Panel>
     
                <asp:Panel ID="formOnlyContainer_write" runat="server">
                    <ol>
                        <li>
                            <asp:Label ID="Label1" runat="server" CssClass="sfTxtLbl" Text="<%$Resources:AddressFieldResources, CountryWriteMode %>" AssociatedControlID="countries_write" />
                            <telerik:RadComboBox id="countries_write" runat="server" Skin="Sitefinity" CollapseAnimation-Type="None" ExpandAnimation-Type="None" Height="300px" RenderingMode="Simple" />
                    <asp:Label ID="countriesRequiredErrorMessage" runat="server" Text="<%$Resources:AddressFieldResources, CountryRequiredMsg %>" CssClass="sfError"></asp:Label>
                        </li>
                        <li>
                            <asp:Label id="statesLabel_write"  runat="server" CssClass="sfTxtLbl" Text="<%$Resources:AddressFieldResources, StateWriteMode %>" AssociatedControlID="states_write" />
                            <telerik:RadComboBox id="states_write" runat="server" Skin="Sitefinity" CollapseAnimation-Type="None" ExpandAnimation-Type="None" Height="300px" RenderingMode="Simple" />
                            <asp:Label ID="statesRequiredErrorMessage" runat="server" Text="<%$Resources:AddressFieldResources, StateRequiredMsg %>" CssClass="sfError"></asp:Label>
                        </li>
                        <sfFields:TextField ID="city_write" runat="server" Title="<%$Resources:AddressFieldResources, CityWriteMode %>" DisplayMode="Write" WrapperTag="li" CssClass="sfShortField350">
                            <ValidatorDefinition required="true" messagecssclass="sfError" requiredviolationmessage="<%$Resources:AddressFieldResources, CityRequiredMsg %>" />
                        </sfFields:TextField>
     
                        <sfFields:TextField ID="zip_write" runat="server" Title="<%$Resources:AddressFieldResources, ZipWriteMode %>" DisplayMode="Write" WrapperTag="li" CssClass="sfShortField100">
                            <ValidatorDefinition required="true" messagecssclass="sfError" requiredviolationmessage="<%$Resources:AddressFieldResources, ZipRequiredMsg %>" />
                        </sfFields:TextField>
                     
                        <sfFields:TextField ID="street_write" runat="server" Title="<%$Resources:AddressFieldResources, StreetWriteMode %>" DisplayMode="Write" WrapperTag="li" CssClass="sfShortField350">
                            <ValidatorDefinition required="true" messagecssclass="sfError" requiredviolationmessage="<%$Resources:AddressFieldResources, StreetRequiredMsg %>" />
                        </sfFields:TextField>
                    </ol>
                </asp:Panel>
     
                <asp:Panel ID="mapOnlyContainer_write" runat="server">
                    <div id="map_canvas" style="width:500px; height:500px" class="sfMTop20"></div>
     
                    <div class="sfExpandableSection" runat="server" id="coordinatesPane">
                        <h3 class="sfMBottom10"><span class="sfMoreDetails">Coordinates</span></h3>
                        <ol class="sfTargetList">
                            <sfFields:TextField ID="latitude_write" runat="server" Title="<%$Resources:AddressFieldResources, LatitudeWriteMode %>" DisplayMode="Write" WrapperTag="li" CssClass="sfShortField250">
                                <ValidatorDefinition required="true" messagecssclass="sfError" regularexpression="^(((-|)[0-9]|(-|)[1-8][0-9]|(-|)[1-9][0])|((-|)[0-9](\.)[0-9]*[1-9]+|(-|)[1-9](\.)[0-9]*|(-|)[1-8][0-9](\.)[0-9]*))$" regularexpressionviolationmessage="<%$Resources:AddressFieldResources, LatitudeRegexMsg %>"
                                    requiredviolationmessage="<%$Resources:AddressFieldResources, LatitudeRequiredMsg %>" />
                            </sfFields:TextField>
     
                            <sfFields:TextField ID="longitude_write" runat="server" Title="<%$Resources:AddressFieldResources, LongitudeWriteMode %>" DisplayMode="Write" WrapperTag="li" CssClass="sfShortField250">
                                <ValidatorDefinition required="true" messagecssclass="sfError" regularexpression="^(((-|)[0-9]|(-|)[1-9][0-9]|(-|)[1][0-7][0-9]|(-|)(180))|((-|)[0-9](\.)[0-9]*[1-9]+|(-|)[1-9](\.)[0-9]*|(-|)[1-9][0-9](\.)[0-9]*|(-|)[1][0-7][0-9](\.)[0-9]*))$" regularexpressionviolationmessage="<%$Resources:AddressFieldResources, LongitudeRegexMsg %>"
                                    requiredviolationmessage="<%$Resources:AddressFieldResources, LongitudeRequiredMsg %>" />
                            </sfFields:TextField>
                        </ol>
                    </div>
                </asp:Panel>
     
            </sf:ConditionalTemplate>
        </templates>
    </sf:ConditionalTemplateContainer>
     
    I have set the map_canvas_read (the one that is displayed on the frontend) to 1000 on both width and height so that it is obvious you have successfully using the custom control and its template.

    I have attached a sample control to this reply, so please follow the instructions below in order to set it up.

    1. Create a CustomControls folder in your solution

    2. Place the files from the archive (the .cs and ascx ones) in the previously created folder

    3. Build the solution

    4. Go to the page where your dynamic module's widget is dropped and click on the Edit button->Single item Settings->Select your template from the drop down and click the Edit selected template button.

    5. Use the Register directive in order to register the custom control and use it on the template instead of the built in one - see image. Take a look at this thread for reference.

    You can also change the "View map" text by altering the Text property on the custom template (marked in orange)

    I hope this helps and please let me know if you have any further questions.
    Regards,
    Pavel Benov
    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 Public Issue Tracking system and vote to affect the priority of the items
  4. BoaMike
    BoaMike avatar
    51 posts
    Registered:
    25 Sep 2009
    30 Oct 2013
    Link to this post
    Is it also possible to alter any of the other Google maps options?  Specifically, these are the options I'd like to be able to change:
    disableDefaultUI: true,
    disableDoubleClickZoom: true,
    mapTypeId: google.maps.MapTypeId.HYBRID
4 posts, 0 answered