Plugin API Reference

To create custom interactions with a map on your page you can either write your own Google Maps API calls against the map object (refer to google.maps.Map, below) or you can call any of the plugin API methods listed below.

It is recommended that you set the Static ID attribute on your reportmap region. This makes it easy to refer to the correct instance of the reportmap object. If your Static ID is mymap, the jQuery plugin ID will be map_mymap. This ID is used in the examples below, you will need to replace this with your own.

Most methods are invoked via the jQuery plugin, e.g.

$("#map_mymap").reportmap("...method to call here...");

• click

  Search the report for a pin by its id value (as returned by the SQL query), and "click" it.

  Example:

  $("#map_mymap").reportmap("click", "12345");
  

• deleteAllFeatures [new in 1.1]

  Remove all GeoJSON features from the map.

  Example:

  $("#map_mymap").reportmap("deleteAllFeatures");
  

• deleteSelectedFeatures [new in 1.1]

  Remove any selected GeoJSON features from the map. The user can select one or more features by first clicking on them.

  Example:

  $("#map_mymap").reportmap("deleteSelectedFeatures");
  

• geolocate

  Search for the user device's location using navigator.geolocation.getCurrentPosition, if possible (and allowed by the user).

  PRE-REQUISITE: to use Geocoding you must enable the Geocoding API on your Google Cloud Platform project. Read "Getting started" at https://developers.google.com/maps/documentation/javascript/geocoding to enable the Geocoding API.

  Example:

  $("#map_mymap").reportmap("geolocate");
  

• getAddressByPos

  Search for the closest address to the given lat / long position using google.maps.Geocoder and raise addressfound trigger if successful.

  PRE-REQUISITE: to use Geocoding you must enable the Geocoding API on your Google Cloud Platform project. Read "Getting started" at https://developers.google.com/maps/documentation/javascript/geocoding to enable the Geocoding API.

  Example:

  $("#map_mymap").reportmap("getAddressByPos", -24.8848, 113.6566);
  

• gotoAddress

  Search the map for an address using google.maps.Geocoder; if found, put a pin at that location and raise addressfound trigger.

  PRE-REQUISITE: to use Geocoding you must enable the Geocoding API on your Google Cloud Platform project. Read "Getting started" at https://developers.google.com/maps/documentation/javascript/geocoding to enable the Geocoding API.

  Example:

  $("#map_mymap").reportmap("gotoAddress", "5 The Esplanade, Perth");
  

• gotoPos

  Place or move the user's pin to the given location.

  Example:

  $("#map_mymap").reportmap("gotoPos", -24.8848, 113.6566);
  

• gotoPosByString

  Parse a string as a lat,long pair and put a pin at that location.

  Example:

  $("#map_mymap").reportmap("gotoPosByString", "-24.8848,113.6566");
  

• loadGeoJsonString [new in 1.1]

  Load a set of features specified in a GeoJSON object.

  Example:

  $("#map_mymap").reportmap("loadGeoJsonString",
    '{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [125.6, 10.1]
        }
     }');
  

• showDirections

  Show a route from one point to another. Each point may be designated by a lat,long pair, or by a street address or other location description. The default travel mode is "Driving".

  Parameters:

  • origin = start location
  • destination = end location
  • travelMode = (optional) - may be 'DRIVING', 'WALKING', 'BICYCLING', or 'TRANSIT' (note: must be uppercase)

  PRE-REQUISITE: to use Directions you must enable the Directions API on your Google Cloud Platform project. Read "Getting started" at https://developers.google.com/maps/documentation/javascript/directions to enable the Directions API.

  Example:

  $("#map_mymap").reportmap("showDirections",
      "-24.8848,113.6566",
      "Exmouth, Western Australia",
      "DRIVING");
  

• google.maps.Map instance

  The Google Map object created by the plugin can be used directly; this supports the full range of capabilities as documented here.

  Examples:

  • Get the map object:

    var m = $("#map_mymap").reportmap("instance").map;
    

    If you are on APEX 5.1 or earlier, the above syntax may not work as it requires jQuery-UI version 1.11 or later. If you are on an older version, use this syntax instead:

    $("#map_mymap").data("jk64Reportmap").map;
    

  • Zoom the map to a particular level (0..23):

    var m = $("#map_mymap").reportmap("instance").map;
    m.setZoom(13);
    

  • Pan the map to a particular location:

    var m = $("#map_mymap").reportmap("instance").map;
    m.panTo({lat:-24.8848, lng:113.6566});
    

  • Pan and zoom the map so that it shows the given extent:

    var m = $("#map_mymap").reportmap("instance").map;
    m.fitBounds({
      south:-33.9337,
      west: 151.070,
      north:-33.7611,
      east: 151.3385
    });
    

    or

    var m = $("#map_mymap").reportmap("instance").map,
        southwest = {-33.9337, 151.070},
        northeast = {-33.7611, 151.3385};
    m.fitBounds(new google.maps.LatLngBounds(southwest,northeast));
    

  • Set tilt:

    var m = $("#map_mymap").reportmap("instance").map;
    m.setTilt(45);
    

  • Change map type:

    var m = $("#map_mymap").reportmap("instance").map;
    m.setMapTypeId("hybrid");
    m.setMapTypeId("roadmap");
    m.setMapTypeId("satellite");
    m.setMapTypeId("terrain");
    

  • Get the map's current center location:

    var pos = $("#map_mymap").reportmap("instance").map.getCenter();
    console.log( pos.lat(), pos.lng() );
    

  • Get the map's current bounds:

    var b = $("#map_mymap").reportmap("instance").map.getBounds();
    console.log( b.getNorthEast().toString() );
    console.log( b.getSouthWest().toString() );
    

  • Export all the features on the map as a GeoJSON file:

    var m = $("#map_mymap").reportmap("instance").map;
    m.data.toGeoJson(function(o){
        console.log( JSON.stringify(o) );
    });