Back

Processing

This plugin enables you to use Google Maps in your projects.


To start using a MapView in your app, you must first load the plugin at the top of your app script using the LoadPlugin method like this:

 app.LoadPlugin( "MapView" );

Then you can create the MapView control and add it to your main layout like this:

 proc = app.CreateMapView( apiKey, 0.9, 0.9 );
 lay.AddChild( proc );

Note: You should get your own Google Maps API key if your release your own app, don't use the one in these examples

Example - Locate User

app.LoadPlugin( "MapView" );

function OnStart()
{
  lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

  apiKey = "AIzaSyCHKNOhdIDuZaCBWkSMEnKWlpqcpaL3zyc";
  map = app.CreateMapView( apiKey, 0.9, 0.9, "locate" );
  lay.AddChild( map );

  app.AddLayout( lay );
}
Copy All    Run   

Example - Add Markers

app.LoadPlugin( "MapView" );

function OnStart()
{
  lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

  apiKey = "AIzaSyCHKNOhdIDuZaCBWkSMEnKWlpqcpaL3zyc";
  map = app.CreateMapView( apiKey, 0.9, 0.9 );
  map.SetOnReady( map_OnReady );
  lay.AddChild( map );

  app.AddLayout( lay );
}

function map_OnReady()
{
  map.SetCenter( 52.235215, 0.144241 );
  map.SetZoom( 12 );
  map.AddMarker( "droidscript.org", "dshq", 52.272671, 0.180330 );
  map.AddMarker( "Science Park", "spark", 52.235215, 0.144241, "green" );
  map.AddMarker( "MakeSpace", "mspace", 52.201745, 0.117297, "blue" );
}

function map_OnMarker( title, id, lat, lng )
{
  app.ShowPopup( title +", "+ id + ", " + lat + ", " + lng )
}
Copy All    Run   

Example - Drawing

app.LoadPlugin( "MapView" );

function OnStart()
{
  lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

  apiKey = "AIzaSyCHKNOhdIDuZaCBWkSMEnKWlpqcpaL3zyc";
  map = app.CreateMapView( apiKey, 0.9, 0.9 );
  map.SetOnReady( map_OnReady );
  lay.AddChild( map );

  app.AddLayout( lay );
}

function map_OnReady()
{
  map.SetCenter( 52.235215, 0.144241 );
  map.SetZoom( 12 );

  var points = [
     {lat: 52.230000, lng: 0.085000},
     {lat: 52.230000, lng: 0.165000},
     {lat: 52.180000, lng: 0.165000},
     {lat: 52.180000, lng: 0.085000}
    ];
  map.DrawPolygon( points, "#0000FF", 0.2, 2, "#0000FF", 0.1, 2 );

  var points = [
     {lat: 52.272671, lng: 0.180330},
     {lat: 52.235215, lng: 0.144241}
    ];
  map.DrawPolyLine( points, "#FF0000", 0.5, 4 );

  map.DrawCircle( 52.272671, 0.180330, 1000, "#00ff00", 0.4, 2, "#00ff00", 0.2, 2 );
}
Copy All    Run