Detect shiftKey for mouse event on google maps v3 polygon

Question

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#MouseEvent

I do receive the mouse event, and I can see that the original event is wrapped in a google event class, which is just what's needed (Access the event. Ua .shiftKey property).

I found however that last month, google may have updated their api and now the property is renamed to event. Pa .shiftKey.

For reference, see http://i.stack.imgur.com/80npD.png for a screenshot of the event structure in the webinspector. 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? What am I missing?

Thx!

Answer 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' in event.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' in event[key]) {
          shiftKey = event[key].shiftKey;
          return true;
      }
      return false;
  })) {
    // 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.

Answer 2

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:

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

Answer 3

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 TJ 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) { 
    var event = 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 .

Answer 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 instanceof window.MouseEvent);
// then do whatever with the MouseEvent
const shiftKey = mouseEvent.shiftKey;