Skip to content

Plugin API Reference

Jump to bottom
Jeffrey Kemp edited this page Jul 17, 2019 · 39 revisions

PLANNED for v1.0

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");

  • geolocate

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

    Example:

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

  • gotoAddress

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

    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");

  • getAddress

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

    Example:

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

  • 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)

    Example:

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

  • google.maps.Map

    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;

    • 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());
Clone this wiki locally