How to: Draw Lines on a Map using Google Maps API

• Jun 25, 2021
• 3 minutes to read

This example demonstrates how to draw lines that connect the map markers using the Google Maps API in an ASP.NET Web Forms application created according to the Use Raster Maps tutorial.

1. Add the WebPolylineController View Controller to the ASP.NET Web Forms module project.
2. In the constructor, set the ViewController.TargetObjectType property to IMapsMarker and the ViewController.TargetViewType to ViewType.ListView.
3. Override the OnViewControlsCreated method and access the WebMapsListEditor List Editor and its MapViewer control. This control exposes the MapViewer.ClientSideEvents property, which allows you to assign JavaScript handlers to the client-side events.
4. Handle the MapViewerClientSideEvents.Customize client-side event and draw a polygon line that connects the displayed markers.

5. To access the markers list, use the CollectionSourceBase.List property of the ListView.CollectionSource.

   C#

   using DevExpress.Persistent.Base;
   using DevExpress.ExpressApp.Maps.Web;
   using System.Web.Script.Serialization;
   using DevExpress.ExpressApp.Maps.Web.Helpers;
   // ...
   public class WebPolylineController : ViewController<ListView> {
       public WebPolylineController() {
           TargetObjectType = typeof(IMapsMarker);
       }
       protected override void OnViewControlsCreated() {
           base.OnViewControlsCreated();
   
           WebMapsListEditor webMapsListEditor = ((ListView)View).Editor as WebMapsListEditor;
           if (webMapsListEditor != null)
               webMapsListEditor.MapViewer.ClientSideEvents.Customize = GetCustomizeScript();
       }
       private IEnumerable<MapPoint> GetPolylinePoints() {
           List<MapPoint> polylinePoints = new List<MapPoint>();
           foreach (IMapsMarker marker in View.CollectionSource.List) {
               polylinePoints.Add(new MapPoint(marker.Latitude, marker.Longitude));
           }
           return polylinePoints;
       }
       private string GetCustomizeScript() {
           var jsSerializer = new JavaScriptSerializer();
           string polylines = jsSerializer.Serialize(GetPolylinePoints());
           return string.Format(
   @"function(sender, map) {{
       map.on('ready', function(e) {{
           var googleMap = e.originalMap;
           var flightPlanCoordinates = {0};
           var flightPath = new google.maps.Polyline({{
           path: flightPlanCoordinates,
           strokeColor: '#FF0000',
           strokeOpacity: 1.0,
           strokeWeight: 2
           }});
   
           flightPath.setMap(googleMap);
       }});
   }}", polylines);
       }
   }
   

   VB.NET

   Imports Microsoft.VisualBasic
   Imports DevExpress.Persistent.Base
   Imports DevExpress.ExpressApp.Maps.Web
   Imports System.Web.Script.Serialization
   Imports DevExpress.ExpressApp.Maps.Web.Helpers
   ' ...
   Public Class WebPolylineController
       Inherits ViewController(Of ListView)
       Public Sub New()
           TargetObjectType = GetType(IMapsMarker)
       End Sub
       Protected Overrides Sub OnViewControlsCreated()
           MyBase.OnViewControlsCreated()
           Dim webMapsListEditor As WebMapsListEditor = TryCast(CType(View, ListView).Editor, WebMapsListEditor)
           If webMapsListEditor IsNot Nothing Then
               webMapsListEditor.MapViewer.ClientSideEvents.Customize = GetCustomizeScript()
           End If
       End Sub
       Private Function GetPolylinePoints() As IEnumerable(Of MapPoint)
           Dim polylinePoints As New List(Of MapPoint)()
           For Each marker As IMapsMarker In View.CollectionSource.List
               polylinePoints.Add(New MapPoint(marker.Latitude, marker.Longitude))
           Next marker
           Return polylinePoints
       End Function
       Private Function GetCustomizeScript() As String
           Dim jsSerializer = New JavaScriptSerializer()
           Dim polylines As String = jsSerializer.Serialize(GetPolylinePoints())
           Return String.Format("function(sender, map) {{" & ControlChars.CrLf & _
    "    map.on('ready', function(e) {{" & ControlChars.CrLf & _
    "        var googleMap = e.originalMap;" & ControlChars.CrLf & _
    "        var flightPlanCoordinates = {0};" & ControlChars.CrLf & _
    "        var flightPath = new google.maps.Polyline({{" & ControlChars.CrLf & _
    "        path: flightPlanCoordinates," & ControlChars.CrLf & _
    "        strokeColor: '#FF0000'," & ControlChars.CrLf & _
    "        strokeOpacity: 1.0," & ControlChars.CrLf & _
    "        strokeWeight: 2" & ControlChars.CrLf & _
    "        }});" & ControlChars.CrLf & _
    "        flightPath.setMap(googleMap);" & ControlChars.CrLf & _
    "    }});" & ControlChars.CrLf & _
    "}}", polylines)
       End Function
   End Class
   

Run the application and create several markers. The result is demonstrated in the image below.