Skip to content

Latest commit

 

History

History
82 lines (66 loc) · 2.12 KB

File metadata and controls

82 lines (66 loc) · 2.12 KB

event: POLYGON_CLICK

The POLYGON_CLICK event is fired when you click on the polygon.

<div id="map_canvas"></div>
var GORYOKAKU_POINTS = [
  {lat: 41.79883, lng: 140.75675},
  {lat: 41.799240000000005, lng: 140.75875000000002},
  {lat: 41.797650000000004, lng: 140.75905},
  {lat: 41.79637, lng: 140.76018000000002},
  {lat: 41.79567, lng: 140.75845},
  {lat: 41.794470000000004, lng: 140.75714000000002},
  {lat: 41.795010000000005, lng: 140.75611},
  {lat: 41.79477000000001, lng: 140.75484},
  {lat: 41.79576, lng: 140.75475},
  {lat: 41.796150000000004, lng: 140.75364000000002},
  {lat: 41.79744, lng: 140.75454000000002},
  {lat: 41.79909000000001, lng: 140.75465},
  {lat: 41.79883, lng: 140.75673}
];

var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv, {
  camera: {
    target: GORYOKAKU_POINTS
  }
});

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

  // Show a virtual dialog (loader.js)
  showVirtualDialog(mapDiv, "Click on the polygon!");

  // Add a polygon
  map.addPolygon({
    'points': GORYOKAKU_POINTS,
    'strokeColor' : '#AA00FF',
    'strokeWidth': 5,
    'fillColor' : '#880000',
    'clickable' : true  // default = false
  }, function(polygon) {

    // Catch the POLYGON_CLICK event
    polygon.on(plugin.google.maps.event.POLYGON_CLICK, onPolygonClick);

  });

});

// The POLYGON_CLICK event passes to the callback
// with the latLng position which is you clicked.
function onPolygonClick(clickLatLng) {

  // The callback is called as the overlay instance.
  var polygon = this;

  // You can change the style for instance.
  polygon.setFillColor("blue");
  polygon.setStrokeColor("green");
  polygon.setStrokeWidth(10);

  // If you want to get the map instance,
  // use the polygon.getMap() method.
  // The polygon.getMap() method returns the map instance
  // which is bound to the polygon.
  var map = polygon.getMap();
  map.addMarker({
    position: clickLatLng,
    title: "You clicked here on the polygon!",
    snippet: clickLatLng.toUrlValue()
  }, function(marker) {
    marker.showInfoWindow();
  });

}