Skip to main content
APIs 2 min read

Adding keyboard navigation to HERE Maps API for Javascript

keyboard navigation here maps api

Web accessibility is the practice of removing barriers that may prevent people from fully experiencing content and supporting inclusion for individuals with disabilities. It can be a complex process to create fully accessible web solutions as the manner of which an individual interacts with the web can vary greatly from person to person. Based on the Web Content Accessibility Guidelines, or WCAG, keyboard navigation is one the ways to improve web accessibility.   

Today I'm sharing quick tips on how to add keyboard navigation to HERE Maps API for Javascript.

Code Sample

We need to capture the KeyboardEvent from user interaction with the keyboard, then apply the correspondent map interaction event to the map object in the HERE Maps API for Javascript code. The event type (keydownkeypress, or keyup) identifies what kind of keyboard activity occurred. For example, adding keyboard navigation to zoom in and out with the keyboard key '+' and '-' can be done by adding the code below.

        var map = new H.Map(document.getElementById('map'),,{
  center: {lat:50, lng:5},
  zoom: 4,
  pixelRatio: window.devicePixelRatio || 1

  (event) => {
    const keyName = event.key;

    if (keyName === "+") {

    if (keyName === "-") {

Sample Application

Below is a simple web map application where you can press '+' to zoom in and '-' to zoom out of the map.


Improving web accessibility through keyboard navigation is essential for ensuring that all users, including those with disabilities, can access and interact with web content effectively. By incorporating keyboard navigation and following the Web Content Accessibility Guidelines (WCAG), you'll be making your HERE Maps API implementation more accessible and providing a better experience for all users.

Erwin Soekianto

Erwin Soekianto

Developer Evangelist

Have your say

Sign up for our newsletter

Why sign up:

  • Latest offers and discounts
  • Tailored content delivered weekly
  • Exclusive events
  • One click to unsubscribe