Drawing Sample

A sample about ASP.NET Google Map Control drawing capabilities.

You can add map drawing capabilities to any GoogleMap control just by adding a DrawingManager extension targeting the control (see the source bellow).

Thank you for using the Development Build of ASP.NET Google Map Control to build Google Maps faster.
Purchase the Commercial Build now to get access to all product updates and the ASP.NET Google Map Control expert support.

DrawingManager Options

The DrawingManager extends GoogleMap Control with Google Maps Drawing Library. It provides set of options that define the set of controls to display, the position of the control, and the initial drawing state.

  • The DrawingMode property of the DrawingManager defines the initial drawing state of the DrawingManager. Default is null, in which case the cursor is in a non-drawing mode when the DrawingManager is initialized.
  • The DrawingControl property of the DrawingManager defines the visibility of the drawing tools selection interface on the map. It accepts a boolean value.
  • You can also define the position of the control, and the types of overlays that should be represented in the control, using the DrawingControlOptions property of the DrawingManager.
    • Position defines the position of the drawing control on the map.
    • DrawingModes is an array of GoogleMaps.Drawing.OverlayType constants, and defines the overlay types to include in the drawing control shape picker. The hand icon will always be present, allowing the user to interact with the map without drawing. The order of the tools in the control will match the order in which they are declared in the array.

DrawingManager Events

Here is the list of map drawing events you can handle client and server side.

  • OverlayComplete - This event is fired when drawing any overlay is complete.
  • CircleComplete - This event is fired when drawing circle is complete.
  • MarkerComplete - This event is fired when drawing marker is complete.
  • PolygonComplete - This event is fired when drawing polygon is complete.
  • PolylineComplete - This event is fired when drawing polyline is complete.
  • RectangleComplete - This event is fired when drawing rectangle is complete.

Source

Markup

<%@ Page Language="C#" MasterPageFile="../Maps.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GoogleMaps.Samples.Maps.Drawing.Default1" %>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <div class="jumbotron">
        <h2>Drawing Sample</h2>
        <p>A sample about ASP.NET Google Map Control drawing capabilities.</p>
    </div>
    <p>
        You can add map drawing capabilities to any GoogleMap control just by adding a DrawingManager extension targeting the control (see the source bellow). 
    </p>
    <div class="map-wrap">
        <map:GoogleMap ID="GoogleMap1" runat="server" MapType="HYBRID" Zoom="8" Latitude="42.1229" Longitude="24.7879" CssClass="map" DefaultAddress="sofia"
            Width="100%" Height="600px" FullscreenControl="true">
        </map:GoogleMap>
        <map:DrawingManager ID="GoogleManager1" TargetControlID="GoogleMap1" runat="server">
        </map:DrawingManager>
        <%--OnOverlayComplete="GoogleManager1_OverlayComplete"--%>
        <div style="text-align: center; padding-top: 10px; color: blue;">
            <asp:Label ID="lblInfo" runat="server"></asp:Label>
        </div>
    </div>

    <h3>DrawingManager Options</h3>
    <p>
        The DrawingManager extends GoogleMap Control with Google Maps Drawing Library.  
        It provides set of options that define the set of controls to display, the position of the control, and the initial drawing state.
    </p>
    <ul>
        <li>The DrawingMode property of the DrawingManager defines the initial drawing state of the DrawingManager. Default is null, in which case the cursor is in a non-drawing mode when the DrawingManager is initialized.</li>
        <li>The DrawingControl property of the DrawingManager defines the visibility of the drawing tools selection interface on the map. It accepts a boolean value. </li>
        <li>You can also define the position of the control, and the types of overlays that should be represented in the control, using the DrawingControlOptions property of the DrawingManager.
            <ul>
                <li>Position defines the position of the drawing control on the map.</li>
                <li>DrawingModes is an array of GoogleMaps.Drawing.OverlayType constants, and defines the overlay types to include in the drawing control shape picker. The hand icon will always be present, allowing the user to interact with the map without drawing. The order of the tools in the control will match the order in which they are declared in the array.</li>
            </ul>
        </li>
    </ul>
    <h3>DrawingManager Events</h3>
    <p>
        Here is the list of map drawing events you can handle client and server side.
    </p>
    <ul>
        <li>OverlayComplete - This event is fired when drawing any overlay is complete.</li>
        <li>CircleComplete - This event is fired when drawing circle is complete.</li>
        <li>MarkerComplete - This event is fired when drawing marker is complete.</li>
        <li>PolygonComplete - This event is fired when drawing polygon is complete.</li>
        <li>PolylineComplete - This event is fired when drawing polyline is complete.</li>
        <li>RectangleComplete - This event is fired when drawing rectangle is complete.</li>
    </ul>
    
</asp:Content>

Code Behind

using GoogleMaps.Drawing;

namespace GoogleMaps.Samples.Maps.Drawing
{
    public partial class Default1 : System.Web.UI.Page
    {
        protected void GoogleManager1_CircleComplete(object sender, DrawingCircleEventArgs e)
        {
            lblInfo.Text = "CircleComplete - " + e;
        }

        protected void GoogleManager1_MarkerComplete(object sender, DrawingMarkerEventArgs e)
        {
            lblInfo.Text = "MarkerComplete - " + e;
        }

        protected void GoogleManager1_PolygonComplete(object sender, DrawingPolygonEventArgs e)
        {
            lblInfo.Text = "PolygonComplete - " + e;
        }

        protected void GoogleManager1_PolylineComplete(object sender, DrawingPolylineEventArgs e)
        {
            lblInfo.Text = "PolylineComplete - " + e;
        }

        protected void GoogleManager1_RectangleComplete(object sender, DrawingRectangleEventArgs e)
        {
            lblInfo.Text = "RectangleComplete - " + e;
        }

        protected void GoogleManager1_OverlayComplete(object sender, DrawingOverlayEventArgs e)
        {
            lblInfo.Text = "OverlayComplete - " + e;
        }
    }
}