Back

Google MapView



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:

 app.LoadPlugin("MapView");

You can then create a google map object by calling the CreateMapView method of the app object like this:

 app.CreateMapView(apiKey, width, height, lat, lng, zoom, maptype);

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.

 map.SetOnReady(callback);


Creating a google map view

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
}
Copy    Run   

Adding marker to a map

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();
    }
}
Copy    Run   

Adding marker on map click

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);
}
Copy    Run   

Creating info window

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();
}
Copy    Run   

Marker with info window

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
}
Copy    Run   

Locate method

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));
}
Copy    Run   

Methods

These are the methods of the map object.

Drawing on the map

Services

Layers

Event Listeners


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

Setters

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

 SetCenter(lattitude, longitude)
 SetClickableIcons(boolean)
 SetHeading(number)
 SetMapTypeId(type)
 SetOptions(options)
 SetStyle(style) String: "hide" or "default"
 SetTilt("Number" | 0 or 45)
 SetZoom(number)

Getters

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.

 GetBounds(callback)
 GetCenter(callback)
 GetClickableIcons(callback)
 GetHeading(callback)
 GetMapTypeId(callback)
 GetProjection(callback)
 GetTilt(callback)
 GetZoom(callback)

Additional methods

Some additional methods that might help you.

 FitBounds(north, south, east, west)
 PanBy(x, y)
 PanTo(lattitude, longitude)

Extra methods

Extra methods that might ease your work.

 RemoveMarker(marker) A marker object or event
 RemoveAllMarkers()
 RemoveInfoWindow(infowindow) An infowindow object or event
 RemoveAllInfowindows()
 RemovePolyline(polyline) A polyline object or event
 RemoveAllPolylines()
 RemovePolygon(polygon) A polygon object or event
 RemoveAllPolygons()
 RemoveCircle(circle) A circle object or event
 RemoveAllCircles()
 RemoveRectangle(rectangle) A rectangle object or event
 RemoveAllRectangles()
 RemoveAllHeatmaps()
 RemoveAll()

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