Skip to content

Polygon

Masashi Katsumata edited this page Mar 27, 2015 · 14 revisions

###Add a polygon The map.addPolygon() method takes a single polygon options object literal, specifying the initial properties of the polygon.

The following fields are available when constructing a polygon:

Field Name Type Description
points Array.LatLng The array of LatLng position.
visible Boolean false if you want to hide.
geodesic Boolean Indicates whether the segments of the polygon should be drawn as geodesics, as opposed to straight lines on the Mercator projection.
strokeColor String Specify the border color of the polygon. You can specify the [HTML colors]
strokeWidth Number The width of border.
fillColor String Specify the inside color of the polygon. You can specify the [HTML colors]
visible Boolean Set false if you want to hide. (Default: true)
zIndex Number Specify the zIndex. (Default: 2)
document.addEventListener("deviceready", function() {
  var mapDiv = document.getElementById("map_canvas");
  var map = plugin.google.maps.Map.getMap(mapDiv);

  map.addEventListener(plugin.google.maps.event.MAP_READY, function() {

    const GORYOKAKU_POINTS = [
      new plugin.google.maps.LatLng(41.79883, 140.75675),
      new plugin.google.maps.LatLng(41.799240000000005, 140.75875000000002),
      new plugin.google.maps.LatLng(41.797650000000004, 140.75905),
      new plugin.google.maps.LatLng(41.79637, 140.76018000000002),
      new plugin.google.maps.LatLng(41.79567, 140.75845),
      new plugin.google.maps.LatLng(41.794470000000004, 140.75714000000002),
      new plugin.google.maps.LatLng(41.795010000000005, 140.75611),
      new plugin.google.maps.LatLng(41.79477000000001, 140.75484),
      new plugin.google.maps.LatLng(41.79576, 140.75475),
      new plugin.google.maps.LatLng(41.796150000000004, 140.75364000000002),
      new plugin.google.maps.LatLng(41.79744, 140.75454000000002),
      new plugin.google.maps.LatLng(41.79909000000001, 140.75465),
      new plugin.google.maps.LatLng(41.79883, 140.75673)
    ];
    map.addPolygon({
      'points': GORYOKAKU_POINTS,
      'strokeColor' : '#AA00FF',
      'strokeWidth': 5,
      'fillColor' : '#880000'
    }, function(polygon) {
      map.animateCamera({
        'target': polygon.getPoints()
      });
    });

  });
});

image

###callback The map.addPolygon() method takes a callback function as the second argument. The callback function is involved when the polygon is created on the map. You can get the instance of the polygon from the argument of the callback function.

map.addPolygon({
  'points': GORYOKAKU_POINTS,
  'strokeColor' : '#AA00FF',
  'strokeWidth': 5,
  'fillColor' : '#880000'
}, function(polygon) {

  setTimeout(function() {
    polygon.remove();
  }, 3000);
});

###Remove the polygon To remove a polygon from the map, call the remove() method.

polygon.remove();

###Click Event As of version1.1.4, you can listen the click event using OVERLAY_CLICK event.

map.addPolygon({
  'points': GORYOKAKU_POINTS,
  'strokeColor' : '#AA00FF',
  'strokeWidth': 5,
  'fillColor' : '#880000'
}, function(polygon) {
  
  polygon.on(plugin.google.maps.event.OVERLAY_CLICK, function(overlay, latLng) {
    polygon.setFillColor("blue");
    polygon.setStrokeColor("green");
    polygon.setStrokeWidth(10);
  });

});


Polygon Class Reference

Method Return value Description
getPoints() Array.LatLng Return the array of positions.
getStrokeColor() String Return the stroke color..
getFillColor() String Return the fill color.
getStrokeWidth() Number Return the border width.
getGeodesic() Boolean Return true if the polygon is drawn as geodesic.
getVisible() Boolean Return true if the polygon is visible.
getZIndex() Boolean Return zIndex.
remove() void Remove the polygon.
setPoints(Array.LatLng) void Set the points.
setStrokeColor(String) void Set the border color.
setFillColor(String) void Set the fill color.
setStrokeWidth(Number) void Set the border width.
setVisible(Boolean) void Set false if you want to hide.
setZIndex(Number) void Set the zIndex.
setGeodesic(Boolean) void Set true if you want to draw the polygon as geodesic.
getMap() Map Return the map instance.

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!


New version 2.0-beta2 is available.

The cordova-googlemaps-plugin v2.0 has more faster, more features.

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/tree/master/v2.0.0/README.md

Clone this wiki locally