Back

Creating a Rectangle

In order to create a rectangle, call the CreateRectangle method of the map object like this:

 map.CreateRectangle(bounds, fc, fo, sw, sc, show)

bounds Object
Required. A latLngBound literals object
fc String
Optional. Fill color
fo Number
Optional. Fill color opacity [0-1]
sw Number
Optional. Stroke weight in pixels
sc String
Optional. Stroke color
show Boolean
Optional. Whether to show or hide the rectangle when created. Default is true.

This will return an rectangle object.


Creating an infowindow

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, 13);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    var bound = {
        north: 7.0689323,
        south: 7.0789323,
        east: 125.6114588,
        west: 125.6314588
    }
    rec = map.CreateRectangle(bound, "#009688", 0.1, 2, "#009688");
}
Copy    Run   

Primary methods

 Show()
 Close()
 Remove()

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

Setters

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

 SetBounds(bounds) A latLngBound object
 SetDraggable(boolean)
 SetEditable(boolean)
 SetOptions(options) Rectangle options object
 SetVisible(boolean)

Creating an infowindow

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, 13);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    var bound = {
        north: 7.0689323,
        south: 7.0789323,
        east: 125.6114588,
        west: 125.6314588
    }
    rec = map.CreateRectangle(bound, "#009688", 0.1, 2, "#009688");
    rec.SetEditable(true);
}
Copy    Run   

Getters

Below are the available getters of the rectangle object.
Note: All the getter functions are asynchronous. Therefore you are required to pass a callback function.

 GetBounds(callback)
 GetDraggable(callback)
 GetEditable(callback)
 GetVisible(callback)

Event listener

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

 AddListener(event, callback)

Available events
bounds_changed, click, dblclick, drag, dragend, dragstart

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


On drag end 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);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    var bound = {
        north: 7.0689323,
        south: 7.0789323,
        east: 125.6114588,
        west: 125.6314588
    }
    rec = map.CreateRectangle(bound, "#009688", 0.1, 2, "#009688");
    rec.SetDraggable(true);
    rec.AddListener("dragend", "OnDragEnd");
}
function OnDragEnd(e) {
    app.ShowPopup("I'm finally here, Thank you.");
    console.log(e);
}
Copy    Run