Preventing Google Maps from stealing keyboard input

Question

On this text field, you can type 'k' and 'm' into the contenteditable field and they correctly appear.

http://jsfiddle.net/MNsBK/

keyboardShortcuts: false // Doesn't work

But, if you drag the background, you'll lose the ability to type an 'm' or a 'k'. How do I stop Google Maps from grabbing these keyboard keys ('k' and 'm') ?

Answer 1

Does it have to be a Div that is editable? I added an input into the div and it doesn't override k & m

http://jsfiddle.net/MNsBK/27/

HTML:

<div id="map"></div>
<div id="keyIn" contenteditable="true">
    <input type='text' />
</div>

JS:

$('#map').mouseup(function(){
  $('#keyIn input').focus();
});

Let me know if it absolutely has to be an editable div and I'll have a closer look.

Answer 2

JQuery approach:

  $("div [contenteditable=true]").keypress(function(e) {
    e.stopImmediatePropagation();
  });

stopPropagation vs. stopImmediatePropagation

After finding that solution, there's an even easier solution.

Use keyboardShortcuts: false attribute when creating the map instance.

map = new google.maps.Map(document.getElementById('map'), {
  keyboardShortcuts: false,
  center: {lat: 37.7932339, lng: -122.4077706},
  zoom: 15});