This plugin lets you integrate google map into your DroidScript app. Happy coding.
To use the Google Map API you must have an API Key.
How to get an API key?In order to use Google MapView to your DroidScript application, you must first load the plugin at the top of your script using the LoadPlugin method like this:
You can then create a google map object by calling the CreateMapView method of the app object like this:
apiKey | Required. The api key you got from google map console associated with your project. |
width | Optional. This is the width of the map as a fraction of the screen width. Default is 1 |
height | Optional. This is the height of the map as a fraction of the screen height. Default is 1 |
lat | Required. The lattitude of the center position of the map. |
lng | Required. The longitude of the center position of the map. |
zoom | Optional. An integer indicating the initial zoom of the map. Default is 13 |
maptype | Optional. A string the sets the mapview type. Can be one of the following: "ROADMAP", "SATELLITE", "TERRAIN", "HYBRID" or "DARKMAP". Default is "ROADMAP". |
This will return a map object.
To avoid errors, determine first whether the map is ready by calling the SetOnReady method of map object passing a function to call when the map is already loaded.
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() { // google map is ready }
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); btnShow = app.CreateButton("Show Marker", 0.3); btnShow.SetOnTouch(ButtonsOnTouch); btnShow.Hide(); lay.AddChild(btnShow); btnHide = app.CreateButton("Hide Marker", 0.3); btnHide.SetOnTouch(ButtonsOnTouch); btnHide.Hide(); lay.AddChild(btnHide); app.AddLayout(lay); } function MapOnReady() { marker = map.CreateMarker(7.0689323, 125.6114588, true); btnShow.Show(); btnHide.Show(); } function ButtonsOnTouch() { if(this.GetText() == "Show Marker") { marker.Show(); } else { marker.Hide(); } }
app.LoadPlugin("MapView"); function OnStart() { lay = app.CreateLayout("Linear", "VCenter, FillXY"); var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck"; map = app.CreateMapView(apiKey, 0.9, 0.7, 7.0689323, 125.6114588, 13); map.SetOnReady(MapOnReady); lay.AddChild(map); app.AddLayout(lay); } function MapOnReady() { map.AddListener("click", "OnMapClick"); } function OnMapClick(e) { var event = JSON.parse(e); var pos = event.latLng; map.CreateMarker(pos.lat, pos.lng, 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); map.SetOnReady(MapOnReady); lay.AddChild(map); btnShow = app.CreateButton("Show Infowindow", 0.3); btnShow.SetOnTouch(ShowInfowindow); btnShow.Hide(); lay.AddChild(btnShow); app.AddLayout(lay); } function MapOnReady() { var content = "This is the content of the info window."; infowindow = map.CreateInfoWindow(content, 7.0689323, 125.6114588, false); //You can pass 'true' as a fourth parameter to show the info window upon creation btnShow.Show(); } function ShowInfowindow() { infowindow.Open(); }
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); var content = "This is the content of the info window."; infowindow = map.CreateInfoWindow(content); marker.AddListener("click", "ShowInfowindow"); } function ShowInfowindow() { infowindow.Open(marker); // If you don't pass a marker, the info window will open on its default position }
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() { map.ShowLocation(OnLocation); app.ShowPopup("Please turn on your location."); } function OnLocation(location) { app.ShowPopup(JSON.stringify(location)); }
You can review for the definitions of the methods below at google map Map class.
Below are the available setters for you to customize your map the way you want.
Below are the available getters of the map object just in case you want to get some additional property on the map.
Note: All the getter functions are asynchronous. Therefore you are required to pass a callback function.
Some additional methods that might help you.
Extra methods that might ease your work.
For the best of everyone, I am constantly updating this plugin for additional methods and samples. Make sure to email me at hamacjumar@gmail.com if you find bugs or if you want additional feature on this plugin. Happy coding.
Version 1:11