Back

Creating Polyline

In order to create a polyline, call the CreatePolyline method of the map object like this:

 map.CreatePolyline(path, sw, sc, so, show)

path Array
Required. An array of latLng literal coordinates to be connected by a line
sw Number
Optional. Stroke weight in pixels
sc String
Optional. Stroke color
so Number
Optional. Stroke opacity
show Boolean
Optional. Whether to show or hide the polyline when created. Default is true.

This will return a polyline object.


Creating a polyline

app.LoadPlugin("MapView");

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.9, 0.5, 7.0689323, 125.6114588, 15);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    var path = [
        {lat: 7.069226, lng: 125.604101},
        {lat: 7.067352, lng: 125.608382}, 
        {lat: 7.070056, lng: 125.610388},
        {lat: 7.071771, lng: 125.607009}
    ];
    polyline = map.CreatePolyline(path);
}
Copy    Run   

Primary methods

 Show()
 Hide()
 Remove()

You can review for the definitions of the methods below at google map Polyline class.

Setters

Below are the available setters for you to customize your polyline the way you want.

 SetDraggable(boolean)
 SetEditable(boolean)
 SetOptions(options) Polyline options object
 SetPath(path) Path array
 SetVisible(boolean)

Getters

Below are the available getters of the polyline object.
Note: All the getter functions are asynchronous. Therefore you are required to pass a callback function. Note: For version 1.11 or greater, calling GetPath is asynchronous.So there's no need to pass a callback

 GetDraggable(callback)
 GetEditable(callback)
 GetPath(callback) --> For asynchronous call, don't pass a callback
 GetVisible(callback)

Event listener

You might need this at some point.
'event' and 'callback' parameter is a string

 AddListener(event, callback)

Available events
click, dblclick, drag, dragend, dragstart

This will return a stringified object. So before you can use the object, parse it first using JSON.parse()


Polyline drag event

app.LoadPlugin("MapView");

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.9, 0.5, 7.0689323, 125.6114588, 15);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    var path = [
        {lat: 7.069226, lng: 125.604101},
        {lat: 7.067352, lng: 125.608382}, 
        {lat: 7.070056, lng: 125.610388},
        {lat: 7.071771, lng: 125.607009}
    ];
    polyline = map.CreatePolyline(path, 6, "#009688", 1, true);
    polyline.SetDraggable(true);
    polyline.AddListener('dragstart', 'OnDragStart');
}
function OnDragStart(e) {
    app.ShowPopup('Oops you start to drag me!');
    console.log(e);
}
Copy    Run