🛠️ Google Maps Clone: Handling errors

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: Handling errors

What happens if you try to draw driving directions across the sea?

If you do that, Google Maps will return an error.

Here’s a list of possible errors (from the API):

Google’s Directions Service doesn’t return a friendly error message. It only returns the status. We need to write the error message ourselves.

Let’s put the error messages into an object.

const errors = {
  'INVALID_REQUEST': 'Invalid request',
  'MAX_WAYPOINTS_EXCEEDED': 'Maximum of 8 waypoints allowed',
  'NOT_FOUND': 'At least one location cannot be geocoded',
  'OVER_QUERY_LIMIT': 'You sent too many requests in a short time. Slow down!',
  'UNKNOWN_ERROR': 'An error happened on the server. Please try again later',
  'ZERO_RESULTS': 'Cannot find route between origin and destination'
}

We can extract the error message with result.status:

searchPanel.addEventListener('submit', event => {
  // ...
  getDirections(request)
    .then(/*...*/)
    .catch(result => {
      const errors = {
        INVALID_REQUEST: 'Invalid request',
        MAX_WAYPOINTS_EXCEEDED: 'Maximum of 8 waypoints allowed',
        NOT_FOUND: 'At least one location cannot be geocoded',
        OVER_QUERY_LIMIT: 'You sent too many requests in a short time. Slow down!',
        UNKNOWN_ERROR: 'An error happened on the server. Please try again later',
        ZERO_RESULTS: 'Cannot find route between origin and destination'
      }
      const message = errors[result.status]
    })
})

We want to show this error message in the DOM. For this, we’ll create a <div> with a class called .search-panel__error.

<div class="search-panel__body">
  <div class="search-panel__error"></div>
  <!-- ... -->
</div>

In the catch call, we will look for the error div and create the error message.

searchPanel.addEventListener('submit', event => {
  // ...
  getDirections(request)
    .then(/*...*/)
    .catch(result => {
      // ...
      const errorDiv = searchPanel.querySelector('.search-panel__error')
      errorDiv.textContent = message
    })
})

Clearing errors

Finally, we must clear the errors when a user tries to search for directions.

searchPanel.addEventListener('submit', event => {
  // ...
  const errorDiv = searchPanel.querySelector('.search-panel__error')
  errorDiv.textContent = ''
  // ...
})

That’s it !