New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    WebForms Map Overview

    TELERIK OFFICES

    • United States
      Palo Alto, CA
      169 University Ave.
      Palo Alto 94301
    • United States
      Boston, MA
      201 Jones Rd Waltham
      Boston MA 02451
    • Denmark
      Copenhagen
      Vesterbrogade 149
      Copenhagen DK-1620 Copenhagen V
    • Australia
      Sydney
      Suite 705, 80 Mount St
      Sydney North Sydney, NSW 2060
    • United States
      Austin, TX
      221 W 6th Street Suite 850
      Austin TX 78701
    • Bulgaria
      Sofia
      54B Tsarigradsko Shose Blvd.
      Sofia 1750
    • India
      Gurgaon
      Unit No 505, Tower A Spaze iTech
      Park Gurgaon Sohna Road Sector 49 Gurgaon Haryana. 122002
    • United Kingdom
      London
      14 Austin Friars
      London EC2N 2HE
    • Germany
      Munich
      Balanstrasse 73
      Munich 81541 Munich

    This example demonstrates a declaration of RadMap that is used to create a simple Map with Markers pointing the Telerik offices around the world. You can see all the main features of this interactive ASP.NET AJAX Map control in the following demos: Tile Layers, Markers, Shapes Layer.

    About RadMap for ASP.NET AJAX

    The Telerik ASP.NET Map helps you create useful and interactive maps with ease. Powered by Kendo UI DataViz, the control offers excellent client-side responsiveness and user experience. The Telerik ASP.NET Map Component comes with rich built-in functionality, including simplified setup for Map Tile Services, Markers, Shape drawing functionality based on GeoJSON objects and helpful UI interaction components.

    RadMap and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

    Key Features

    • Zoom and pan (mouse and touch support plus dedicated UI elements)
    • Support for multiple layers
    • Markers
    • Marker tooltips
    • Custom shape definition through GeoJSON objects
    • Client-side data binding
    • Server-side data binding
    • Rich client-side API
    • Multiple client-side events

    More about RadMap for ASP.NET AJAX

    • DefaultVB.aspx
    • DefaultVB.aspx.vb
    • scripts.js
    • styles.css
    <%@ Page Title="" Language="VB"  AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Map.Overview.DefaultVB" %>
     
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link rel="stylesheet" href="styles.css" type="text/css" />
        <script src="scripts.js"></script>
    </head>
     
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-container size-auto">
            <h2 class="mapTitle">TELERIK OFFICES</h2>
            <telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Zoom="2" CssClass="MyMap">
                <CenterSettings Latitude="23" Longitude="10" />
                <LayersCollection>
                    <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                        UrlTemplate="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
                        Attribution="&copy; <a href='http://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
                    </telerik:MapLayer>
                </LayersCollection>
                <MarkersCollection>
                    <telerik:MapMarker Shape="PinTarget" Title="Palo Alto">
                        <TooltipSettings Content="US - Palo Alto, CA"></TooltipSettings>
                        <LocationSettings Latitude="37.444610" Longitude="-122.163283" />
                    </telerik:MapMarker>
     
                    <telerik:MapMarker Shape="PinTarget" Title="Boston">
                        <TooltipSettings Content="US - Boston, MA"></TooltipSettings>
                        <LocationSettings Latitude="42.375067" Longitude="-71.272233" />
                    </telerik:MapMarker>
     
                    <telerik:MapMarker Shape="PinTarget" Title="Copenhagen">
                        <TooltipSettings Content="Denmark - Copenhagen"></TooltipSettings>
                        <LocationSettings Latitude="55.670312" Longitude="12.538266" />
                    </telerik:MapMarker>
     
                    <telerik:MapMarker Shape="PinTarget" Title="Sydney">
                        <TooltipSettings Content="Australia - Sydney"></TooltipSettings>
                        <LocationSettings Latitude="-33.838707" Longitude="151.207959" />
                    </telerik:MapMarker>
     
                    <telerik:MapMarker Shape="PinTarget" Title="Austin">
                        <TooltipSettings Content="US - Austin, TX"></TooltipSettings>
                        <LocationSettings Latitude="30.268162" Longitude="-97.744873" />
                    </telerik:MapMarker>
     
                    <telerik:MapMarker Shape="PinTarget" Title="Sofia">
                        <TooltipSettings Content="Bulgaria - Sofia"></TooltipSettings>
                        <LocationSettings Latitude="42.650613" Longitude="23.379025" />
                    </telerik:MapMarker>
     
                    <telerik:MapMarker Shape="PinTarget" Title="Gurgaon">
                        <TooltipSettings Content="India - Gurgaon"></TooltipSettings>
                        <LocationSettings Latitude="28.410139" Longitude="77.042439" />
                    </telerik:MapMarker>
     
                    <telerik:MapMarker Shape="PinTarget" Title="London">
                        <TooltipSettings Content="UK - London"></TooltipSettings>
                        <LocationSettings Latitude="51.515986" Longitude="-0.085798" />
                    </telerik:MapMarker>
     
                    <telerik:MapMarker Shape="PinTarget" Title="Munich">
                        <TooltipSettings Content="Germany - Munich"></TooltipSettings>
                        <LocationSettings Latitude="48.117227" Longitude="11.601990" />
                    </telerik:MapMarker>
                </MarkersCollection>
                <ClientEvents OnMarkerActivate="telerikDemo.OnMarkerActivate" />
            </telerik:RadMap>
     
            <div class="contactsContainer">
                <ul id="offices">
                    <li class="office">
                        <div class="leftCol">
                            <div class="flag flag-unitedstates"></div>
                        </div>
                        <div class="rightCol">
                            <div class="country">United States</div>
                            <div class="city">Palo Alto, CA</div>
                            <div class="address">169 University Ave.</div>
                            <div class="address">Palo Alto 94301</div>
                        </div>
                    </li>
                    <li class="office">
                        <div class="leftCol">
                            <div class="flag flag-unitedstates"></div>
                        </div>
                        <div class="rightCol">
                            <div class="country">United States</div>
                            <div class="city">Boston, MA</div>
                            <div class="address">201 Jones Rd Waltham</div>
                            <div class="address">Boston MA 02451</div>
                        </div>
                    </li>
                    <li class="office">
                        <div class="leftCol">
                            <div class="flag flag-denmark"></div>
                        </div>
                        <div class="rightCol">
                            <div class="country">Denmark</div>
                            <div class="city">Copenhagen</div>
                            <div class="address">Vesterbrogade 149</div>
                            <div class="address">Copenhagen DK-1620 Copenhagen V</div>
                        </div>
                    </li>
                    <li class="office">
                        <div class="leftCol">
                            <div class="flag flag-australia"></div>
                        </div>
                        <div class="rightCol">
                            <div class="country">Australia</div>
                            <div class="city">Sydney</div>
                            <div class="address">Suite 705, 80 Mount St</div>
                            <div class="address">Sydney North Sydney, NSW 2060</div>
                        </div>
                    </li>
                    <li class="office">
                        <div class="leftCol">
                            <div class="flag flag-unitedstates"></div>
                        </div>
                        <div class="rightCol">
                            <div class="country">United States</div>
                            <div class="city">Austin, TX</div>
                            <div class="address">221 W 6th Street Suite 850</div>
                            <div class="address">Austin TX 78701</div>
                        </div>
                    </li>
                    <li class="office">
                        <div class="leftCol">
                            <div class="flag flag-bulgaria"></div>
                        </div>
                        <div class="rightCol">
                            <div class="country">Bulgaria</div>
                            <div class="city">Sofia</div>
                            <div class="address">54B Tsarigradsko Shose Blvd.</div>
                            <div class="address">Sofia 1750</div>
                        </div>
                    </li>
                    <li class="office">
                        <div class="leftCol">
                            <div class="flag flag-india"></div>
                        </div>
                        <div class="rightCol">
                            <div class="country">India</div>
                            <div class="city">Gurgaon</div>
                            <div class="address">Unit No 505, Tower A Spaze iTech</div>
                            <div class="address">Park Gurgaon Sohna Road Sector 49 Gurgaon Haryana. 122002</div>
                        </div>
                    </li>
                    <li class="office">
                        <div class="leftCol">
                            <div class="flag flag-unitedkingdom"></div>
                        </div>
                        <div class="rightCol">
                            <div class="country">United Kingdom</div>
                            <div class="city">London</div>
                            <div class="address">14 Austin Friars</div>
                            <div class="address">London EC2N 2HE</div>
                        </div>
                    </li>
                    <li class="office">
                        <div class="leftCol">
                            <div class="flag flag-germany"></div>
                        </div>
                        <div class="rightCol">
                            <div class="country">Germany</div>
                            <div class="city">Munich</div>
                            <div class="address">Balanstrasse 73</div>
                            <div class="address">Munich 81541 Munich</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
     
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance