Google map polyline double click event

Question

I have some sample polylines here where I am trying to fire double click event on each polylines.

I tried with,

 google.maps.event.addListener(poly, 'dblclick', (function (poly, i) {
    alert();
 })(poly, i));

Butit gives the alert on loading the map only. So how can I fire double click event on polylines?

Answer 1

Two issues:

1. There is no function for your dblclick listener as written, the alert is run immediately and its return value is used as the click listener function.
2. Once the infowindow opens on the click listener, it blocks the polyline so it doesn't get the second click

If I move the infowindow so it doesn't block the second click and fix the dblclick event listener function, it works.

proof of concept fiddle

code snippet:

(note that alert doesn't work in the code snippet, produces this error: Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set.)

var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
  var mapOptions = {
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var bounds = new google.maps.LatLngBounds();
  var polygons = [];
  var arr = new Array();
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  for (var i in coordinates) {
    arr = [];

    for (var j = 0; j < coordinates[i].length; j++) {
      arr.push(new google.maps.LatLng(
        parseFloat(coordinates[i][j][0]),
        parseFloat(coordinates[i][j][1])));

      bounds.extend(arr[arr.length - 1])
    }

    var lineSymbol = {
      path: 'M 0,-1 0,1',
      strokeOpacity: 1,
      //  strokeWeight: 1,
      scale: 4
    };
    var strOp = 1;
    var icons = [];
    if (i == "feed5") {
      icons = [{
        icon: lineSymbol,
        offset: '0',
        repeat: '20px'
      }];

      strOp = 0;
    }


    // Construct the polygon.
    polygons.push(new google.maps.Polyline({
      path: arr,
      strokeColor: '#FF0000',
      strokeOpacity: strOp,
      strokeWeight: 2,
      icons: icons,
    }));
    var poly = polygons[polygons.length - 1];
    poly.setMap(map);

    google.maps.event.addListener(poly, 'dblclick', (function(poly, i) {
      return function() {
        alert();
      }
    })(poly, i));

    google.maps.event.addListener(poly, 'click', (function(poly, i) {
      return function(event) {
        infowindow.setContent("" + i);
        infowindow.setPosition(google.maps.geometry.spherical.computeOffset(event.latLng, 90, 10000));
        infowindow.open(map);
      };
    })(poly, i));



  }
  map.fitBounds(bounds);

}

google.maps.event.addDomListener(window, 'load', initialize);
  // Define the LatLng coordinates for the polygon's path.
  var coordinates = {
    "feed1": [
      [12.991838, 77.70851],
      [12.9912195, 77.707405],
      [12.989732, 77.705246],
      [12.989732, 77.70416]
    ],

    "feed2": [
      [12.999084, 77.71209],
      [13.004616, 77.71334]
    ],

    "feed3": [
      [12.993468, 77.711845],
      [12.992951, 77.71133],
      [12.992114, 77.71015],
      [12.99217, 77.708626],
      [12.991289, 77.70722],
      [12.989901, 77.70519],
      [12.989763, 77.70434]
    ],

    "feed4": [
      [13.298387, 77.55231],
      [13.297882, 77.552536],
      [13.295542, 77.55311],
      [13.293249, 77.55186],
      [13.29154, 77.551544],
      [13.290586, 77.55115],
      [13.290111, 77.54973],
      [13.288905, 77.54885],
      [13.286778, 77.54691],
      [13.28569, 77.54599],
      [13.283473, 77.54516],
      [13.28245, 77.54316],
      [13.279767, 77.54178],
      [13.278179, 77.541046],
      [13.276475, 77.540146],
      [13.276237, 77.53926]
    ],

    "feed5": [
      [13.295467, 77.55559],
      [13.296861, 77.55374],
      [13.298651, 77.55295]
    ]
  };

html,
  body,
  #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map-canvas"></div>

Answer 2

Remove click listener and try like this:

google.maps.event.addListener(poly, 'dblclick', function() {
   alert("test");
});

Listener won't work both click and dblclick