🛠️ Google Maps Clone: Keyboard

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

🛠️ Google Maps Clone: Keyboard

Source

We don’t have to do anything much for the Google Maps Clone when it comes to keyboard accessibility. Google’s Autocomplete does most of the job for us.

There’s only one improvement we can make.

When the user clicks the “add new end point” button, focus remains on that button. We want to shift focus to the new input so they can begin typing immediately.

addSearchboxButton.addEventListener('click', event => {
  // ...
  lastSearchBox.insertAdjacentElement('afterend', clone)
  clone.querySelector('input').focus()
})
Focuses on the input of the new search box

That’s it!