How to customize the Google Maps widget that comes with dyna

Posted by Community Admin on 03-Jul-2013 00:00

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?

Posted by Community Admin on 03-Jul-2013 00:00

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

Posted by Community Admin on 05-Jul-2013 00:00

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

Posted by Community Admin on 30-Oct-2013 00:00

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

This thread is closed

All Replies