Google Map Control

Directions Sample

A sample about ASP.NET Google Map Control directions usage.

Enter the desired origin and destination of directions to show and click the 'Show' button.

Directions

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.

Source

Markup

<%@ Page Title="" Language="C#" MasterPageFile="Directions.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GoogleMaps.Samples.Directions.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div class="jumbotron">
        <h2>Directions Sample</h2>
        <p>
            A sample about ASP.NET Google Map Control directions usage.
        </p>
    </div>
    <p>
        Enter the desired origin and destination of directions to show and click the 'Show' button.
    </p>
    <fieldset>
        <legend>Directions</legend>
        <p>
            <asp:Label runat="server" Text="Origin" AssociatedControlID="txtOrigin" />
            <asp:TextBox ID="txtOrigin" runat="server" Width="400px"></asp:TextBox>
        </p>
        <p>
            <asp:Label runat="server" Text="Destination" AssociatedControlID="txtDestination" />
            <asp:TextBox ID="txtDestination" runat="server" Width="400px"></asp:TextBox>
        </p>
        <p style="margin-bottom: 0;">
            <label>
                &nbsp;</label>
            <asp:Button runat="server" Text="Show" OnClick="HandleShowClick" />
        </p>
    </fieldset>
    <div class="map-wrap">
        <map:GoogleMap ID="GoogleMap1" runat="server" Latitude="42.1229" Longitude="24.7879"
            Zoom="4" CssClass="map" Width="100%" Height="600px" FullscreenControl="true">
        </map:GoogleMap>
        <map:GoogleDirections ID="GoogleDirections1" TargetControlID="GoogleMap1" runat="server"
            Origin="plovdiv" Destination="sofia" Draggable="true" PanelID="route" OnChanged="HandleDirectionsChanged">
        </map:GoogleDirections>
    </div>
    <div id="route">
    </div>
    
</asp:Content>

Code Behind

using System;

namespace GoogleMaps.Samples.Directions
{
    public partial class Default : System.Web.UI.Page
    {
        protected void HandleShowClick(object sender, EventArgs e)
        {
            var destination = txtDestination.Text;
            var origin = txtOrigin.Text;
            if ((origin != null) && (destination != null))
            {
                GoogleDirections1.Destination.Address = destination;
                GoogleDirections1.Origin.Address = origin;
            }
        }

        protected void HandleDirectionsChanged(object sender, GoogleMaps.Directions.DirectionsChangedEventArgs e)
        {

        }
    }
}

Directions