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

• Oct 21, 2020
• 5 minutes to read

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

• ASP.NET-Oriented Controller

  • Add the WebPolylineController View Controller to the ASP.NET module project.
  • In the constructor, set the ViewController.TargetObjectType property to IMapsMarker and the ViewController.TargetViewType to ViewType.ListView.
  • 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.
  • Handle the MapViewerClientSideEvents.Customize client-side event and draw a polygon line that connects the displayed markers.
  • 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.

  

• Mobile-Oriented Controller

  • Add the MobilePolylineController View Controller to the Mobile module project.
  • In the constructor, set the ViewController.TargetViewId property to MapsMarker_ListView.
  • Override the OnViewControlsCreated method and access the MobileMapsListEditor List Editor and its Map control. This control exposes the Map.OnCustomize property, which allows you to assign JavaScript code to draw a polygon line that connects the specified map points. Note that JavaScript code should be enclosed in brackets.
  C#

  using DevExpress.ExpressApp;
  using DevExpress.ExpressApp.Maps.Mobile;
  using DevExpress.ExpressApp.Maps.Mobile.Editors;
  using DevExpress.ExpressApp.Maps.Mobile.Helpers;
  using Newtonsoft.Json;
  using System.Collections.Generic;
  //...
  public class MobilePolylineController : ViewController<ListView> {
      public MobilePolylineController() {
          TargetViewId = "MapsMarker_ListView";
      }
      protected override void OnViewControlsCreated() {
          base.OnViewControlsCreated();
          MobileMapsListEditor mobileMapsListEditor = View.Editor as MobileMapsListEditor;
          if (mobileMapsListEditor != null) {
              Map map = mobileMapsListEditor.Control as Map;
              map.OnCustomize = GetCustomizeScript();
          }
      }
      private IEnumerable<MapPoint> GetPolylinePoints() {
          List<MapPoint> polylinePoints = new List<MapPoint>();
          polylinePoints.Add(new MapPoint(40.7, -74));
          polylinePoints.Add(new MapPoint(50.3, 0.7));
          return polylinePoints;
      }
      private string GetCustomizeScript() {
          var polylines = JsonConvert.SerializeObject(GetPolylinePoints());
          return string.Format(
              @"(function(mapInstance) {{
                  mapInstance.on('ready', function(e) {{
                  var googleMap = e.originalMap;
                  var flightPlanCoordinates = {0};
                  var flightPath = new google.maps.Polyline({{
                      path: flightPlanCoordinates,
                      strokeColor: '#0000FF',
                      strokeOpacity: 1.0,
                      strokeWeight: 2
                  }});
                  window.flightPath = flightPath;
                  flightPath.setMap(googleMap);
              }});
          }})", polylines);
      }
  }
  

  VB.NET

  Imports Microsoft.VisualBasic
  Imports DevExpress.ExpressApp
  Imports DevExpress.ExpressApp.Maps.Mobile
  Imports DevExpress.ExpressApp.Maps.Mobile.Editors
  Imports DevExpress.ExpressApp.Maps.Mobile.Helpers
  Imports Newtonsoft.Json
  Imports System.Collections.Generic
  '...
  Public Class MobilePolylineController
      Inherits ViewController(Of ListView)
      Public Sub New()
          TargetViewId = "MapsMarker_ListView"
      End Sub
      Protected Overrides Sub OnViewControlsCreated()
          MyBase.OnViewControlsCreated()
          Dim mobileMapsListEditor As MobileMapsListEditor = TryCast(View.Editor, MobileMapsListEditor)
          If mobileMapsListEditor IsNot Nothing Then
              Dim map As Map = TryCast(mobileMapsListEditor.Control, Map)
              map.OnCustomize = GetCustomizeScript()
          End If
      End Sub
      Private Function GetPolylinePoints() As IEnumerable(Of MapPoint)
          Dim polylinePoints As New List(Of MapPoint)()
          polylinePoints.Add(New MapPoint(40.7, -74))
          polylinePoints.Add(New MapPoint(50.3, 0.7))
          Return polylinePoints
      End Function
      Private Function GetCustomizeScript() As String
          Dim polylines = JsonConvert.SerializeObject(GetPolylinePoints())
          Return String.Format("(function(mapInstance) {{" & ControlChars.CrLf & _
  "                mapInstance.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: '#0000FF'," & ControlChars.CrLf & _
  "                    strokeOpacity: 1.0," & ControlChars.CrLf & _
  "                    strokeWeight: 2" & ControlChars.CrLf & _
  "                }});" & ControlChars.CrLf & _
  "                window.flightPath = flightPath;" & ControlChars.CrLf & _
  "                flightPath.setMap(googleMap);" & ControlChars.CrLf & _
  "            }});" & ControlChars.CrLf & _
  "        }})", polylines)
      End Function
  End Class
  

  Run the application. The result is demonstrated in the image below.