GroundOverlay

Masashi Katsumata edited this page Sep 20, 2016 · 12 revisions

Join the official community

New versions will be announced through the official community. Stay tune!

Do you have a question or feature request?

Feel free to ask me on the issues tracker.

Or on the official community is also welcome!

Jump to...

Clone this wiki locally

Add a GroundOverlay

A ground overlay is an image that is fixed to a map. To add an image, call addGroundOverlay() method. The map.addGroundOverlay() method takes a single overlay options object literal, specifying the initial properties of the ground overlay.

The following fields are available when constructing a ground overlay:

Field Name Type Description
url String The url of the image. You can use one of the following protocol: http, https, file, cdvfile and the file absolute path. (Android also accepts file:///android_asset/)
bounds Array.LatLng Array of LatLng for display the ground overlay.
visible Boolean false if you want to hide the ground overlay. (Default: true)
opacity Number Opacity of the ground overlay. Specify the number between 0.0 - 1.0 (Default: 1.0)
bearing Number The angle of the image. (Default: 0)
zIndex Number Specify the zIndex. (Default: 1)
var bounds = [
  new plugin.google.maps.LatLng(40.712216,-74.22655),
  new plugin.google.maps.LatLng(40.773941,-74.12544)
];

map.addGroundOverlay({
  'url': "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
  'bounds': bounds,
  'opacity': 0.5
}, function(groundOverlay) {
  map.showDialog();
  map.animateCamera({
    'target': bounds
  });
});

image

Bearing

You can change the bearing using setBearing() method

map.addGroundOverlay({
  'url': "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
  'bounds': bounds
}, function(groundOverlay) {

  // Add event listener
  map.on("BEARING_CHANGE", function(value) {
    groundOverlay.setBearing(value);
  });

});

$("#bearingRange").change(function() {
  var value = $(this).val();
  map.trigger("BEARING_CHANGE", value);
});

img

Click Event

map.addGroundOverlay({
  'url': "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
  'bounds': bounds
}, function(groundOverlay) {

  map.on(plugin.google.maps.event.OVERLAY_CLICK, function(overlay, latLng) {
    alert("Clicked");
  });

});

GroundOverlay Class Reference

Method Return value Description
setBearing(Number) void Set the bearing of the ground overlay (the direction that the vertical axis of the ground overlay points) in degrees clockwise from north.
getBearing() Number Return the bearing of the ground overlay in degrees clockwise from north.
setOpacity(Number) void Change the marker opacity. (0.0 - 1.0)
getOpacity() Number Return the marker opacity.
setVisible(Boolean) void Set false if you want to hide the ground overlay.
getVisible() Boolean Return true if the ground overlay is visible
setImage(String) void Change the image url of the ground overlay.
remove() void Remove the ground overlay.
getMap() Map Return the map instance.