In order to create a marker, call the CreateMarker method of the map object like this:
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.
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); }
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(); } }
You can review for the definitions of the methods below at google map Marker class.
Below are the available setters for you to customize your marker the way you want.
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
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); }
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"); }
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.
A very usefull method of the marker object.
'event' and 'callback' parameter is a string
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.
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); }