none
V8 - Key Events RRS feed

  • Question

  • Hello

    In my application I use Key Events (KeyDown, KeyUp etc).

    I see you have dropped them as 'rarely used'.

    Aren't I the (un)lucky one? :)

    Any suggestions?

    I am keen that the users do not see V8 as a step backwards.

    Thanks

    Wednesday, January 4, 2017 10:27 AM

Answers

  • Simply add a standard JavaScript key event to the map div. Here is a code sample:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    
        <script type='text/javascript'>
        var map;
    
        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
    
            document.getElementById('myMap').onkeypress = function (e) {
                document.getElementById('output').innerText = 'Key Pressed: ' + e.char;
            };
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div>
        <br/>
        <div id="output"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Thursday, January 5, 2017 8:06 PM
  • When added to the map div, the key event will only fire when the map has focus.

    [Blog] [twitter] [LinkedIn]

    Saturday, January 14, 2017 4:09 PM

All replies

  • Simply add a standard JavaScript key event to the map div. Here is a code sample:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    
        <script type='text/javascript'>
        var map;
    
        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
    
            document.getElementById('myMap').onkeypress = function (e) {
                document.getElementById('output').innerText = 'Key Pressed: ' + e.char;
            };
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div>
        <br/>
        <div id="output"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Thursday, January 5, 2017 8:06 PM
  • Thanks. Looks good (not yet tried it)
    Friday, January 6, 2017 9:32 AM
  • In fact adding the key event to the map div did not work for me, perhaps my own incompetence.

    But window.addEventListener( "keypress", ...  )  did.

    Saturday, January 14, 2017 10:13 AM
  • When added to the map div, the key event will only fire when the map has focus.

    [Blog] [twitter] [LinkedIn]

    Saturday, January 14, 2017 4:09 PM