Back

Creating a Marker

In order to create a marker, call the CreateMarker method of the map object like this:

 map.CreateMarker(lat, lng, show)

lat Number
Required. The latitude of the position of the anchor of the marker.
lng Number
Required. The longitude of the position of the anchor of the marker.
show Boolean
Optional. Whether to show or hide the marker when created. Default is true.

This will return a marker object.


Tips:
If you use the default marker icon, the icon may take a while to display on the map. Much better to use a local file for your icon.

Creating a marker

app.LoadPlugin("MapView");

var lat = 7.0689323;
var lng = 125.6114588;

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

    app.AddLayout(lay);
}
function MapOnReady() {
    marker = map.CreateMarker(lat, lng, true);
}
Copy    Run   

Show or hide a marker

app.LoadPlugin("MapView");

var lat = 7.0689323;
var lng = 125.6114588;
var map, marker;

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

        btnShow = app.CreateButton("Show Marker");
        btnShow.SetOnTouch(btnTouch);
        btnShow.Hide();
        lay.AddChild(btnShow);

        btnHide = app.CreateButton("Hide Marker");
        btnHide.SetOnTouch(btnTouch);
        btnHide.Hide();
        lay.AddChild(btnHide);

    app.AddLayout(lay);
}
function MapOnReady() {
    marker = map.CreateMarker(lat, lng, false);

    btnShow.Show();
    btnHide.Show();
}
function btnTouch() {
    if(this.GetText() == "Show Marker") {
        marker.Show();
    } else {
        marker.Hide();
    }
}
Copy    Run   

Primary methods

 Show()
 Hide()
 Remove()

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

Setters

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

 SetAnimation(animation) String. "BOUNCE" or "DROP"
 SetClickable(boolean)
 SetDraggable(boolean)
 SetIcon(url|path, color, width, height)
 SetLabel(character)
 SetOpacity(number)
 SetOptions(options)
 SetPosition(lat, lng)
 SetTitle(string)
 SetVisible(boolean)
 SetZIndex(number)

SetIcon(url|path, color, width, height) If you provide a url or path to your icon, don't provide the color parameter anymore. If you provide a color the, the url or path you provided is overriden with the google map's default icon having the color that you pass.
width Width in pixels
height Height in pixels

Draggable marker

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() {
    marker = map.CreateMarker(7.0689323, 125.6114588, true);
    marker.SetDraggable(true);
}
Copy    Run   

Set Icon

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

        btn1 = app.CreateButton("Set Icon");
        btn1.SetOnTouch(ChangeIcon);
        btn1.Hide();
        lay.AddChild(btn1);
        
        btn2 = app.CreateButton("Set Icon");
        btn2.SetOnTouch(ChangeColor);
        btn2.Hide();
        lay.AddChild(btn2);

    app.AddLayout(lay);
}
function MapOnReady() {
    marker = map.CreateMarker(7.0689323, 125.6114588, true);
    btn1.Show();
    btn2.Show();
}
function ChangeIcon() {
    var iconUrl = "/sdcard/DroidScript/.edit/resources/droidscript.png";
    marker.SetIcon(iconUrl);
}
function ChangeColor() {
    marker.SetIcon(null, "green");
}
Copy    Run   

Getters

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

 GetAnimation(callback)
 GetClickable(callback)
 GetDraggable(callback)
 GetIcon(callback)
 GetLabel(callback)
 GetOpacity(callback)
 GetPosition(callback)
 GetShape(callback)
 GetTitle(callback)
 GetVisible(callback)
 GetZIndex(callback)

Event listener

A very usefull method of the marker object.
'event' and 'callback' parameter is a string

 AddListener(event, callback)

Available events
animation_changed, click, clickable_changed, cursor_changed, dblclick, drag, dragend, draggable_changed, dragstart, flat_changed, icon_changed, mousedown, mouseout, mouseover, mouseup, position_changed, rightclick, shape_changed, title_changed, visible_changed, zindex_changed

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


Marker click 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() {
    marker = map.CreateMarker(7.0689323, 125.6114588, true);
    marker.AddListener('click', 'OnMarkerClick');
}
function OnMarkerClick(e) {
    app.ShowPopup('You click me!');
    console.log(e);
}
Copy    Run