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

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

    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);
        }
    }
    

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

    Maps_Polyline

  • 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.
    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);
        }
    }
    

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

    Maps_Polyline_Mobile

See Also