Detect Shiftkey For Mouse Event On Google Maps V3 Polygon

Is there a way to detect a shift-mouseclick on a polygon when using the google maps V3(.16) javascript API? https://developers.google.com/maps/documentation/javascript/reference#M

Solution 1:

Using undocumented properties is almost always a bad idea. If you can possibly avoid it, avoid it. In this case, the API is probably being compressed with the Closure Compiler, and so the next time they update, it may not be Pa anymore either.

Is there any way to detect whether the shift key is pressed during a click on a google maps polygon using the event, and without having to rely on google-not-updating-their-api?

If just Ua vs. Pa:

You could feature detect:

var shiftKey = (event.Ua || event.Pa).shiftKey;

That uses JavaScript's curiously powerful || operator to reference the Ua property's value, if there is one and it's truthy, or the Pa property's value otherwise.

This assumes that when they change it from Ua to Pa, they don't use Ua for something else. If there's a chance of that, this more thorough version would do it:

var shiftKey = ((event.Ua && 'shiftKey'inevent.Ua) ? event.Ua : event.Pa).shiftKey;

That specifically checks for a Ua object with a shiftKey property, falling back to Pa if not found.

If it could be anything

...you can search for it:

var shiftKey;
if (Object.keys(event).some(function(key) {
      if (event[key] && 'shiftKey'inevent[key]) {
          shiftKey = event[key].shiftKey;
          returntrue;
      }
      returnfalse;
  })) {
    // We found it, `shiftKey` has the value
} else {
    // We didn't find it
}

Side note: Object.keys is an ES5 feature present on all modern browsers. If you need to support older browsers like IE8, it can be polyfilled.

Solution 2:

I've just come across this problem (after noticing I couldn't just use window.event because Firefox doesn't support it)

google.maps.mouseEvent has, as T.J. Crowder said, a property which contains keys such as shiftKey, altKey, etc. In the current release of google maps api, said property is va. So of course we can't use it because its name will change in the next release of so.

So my solution has been to iterate over the google.maps.mouseEvent parameter, checking its values so see which one of them is a valid window.MouseEvent.

var newcircle= new google.maps.Circle({map:map, position:map.getCenter(), radius:1000});

google.maps.event.addListener(newcircle,'click',function(mouseEvent) { 
    varevent = Object.values(mouseEvent)
        .filter(function (property) {
          return property instanceof window.MouseEvent;
        });

    if (event.length) {
      event = event[0];
    } else {
      event = {};
    }
    var shiftKey = event.shiftKey || false;
});

Funny enough, when I tried to use a marker for this example, there wasn't an instance of window.MouseEvent in the google.maps.mouseEvent.

Solution 3:

I ended up with a solution close to amenadiel's answer. I thought it would be better not to relay on all the possible uglified variable names, but to look for the one being a MouseEvent and use that one to check for the shiftKey property, like this:

functionpolygonListener(polygonEvent) { 
  var shiftKey = false;
  for(var i in polygonEvent){
    if(polygonEvent[i] instanceofwindow.MouseEvent){
      shiftKey = polygonEvent[i].shiftKey;
      break;
    }
  }
  // Rest of the code
}

Solution 4:

In case anyone is still looking how to get the MouseEvent from a google maps event, this is the method I've been using.

const mouseEvent = Object.values(event).find(p => p instanceofwindow.MouseEvent);
// then do whatever with the MouseEventconst shiftKey = mouseEvent.shiftKey;