Преобразование адреса в виде строки для создания кнопки направления карт Google

Question

Проблема в том, что я пытаюсь использовать пользовательские данные, чтобы создать ссылку для каждого создаваемого адреса, поэтому я не могу жестко закодировать + в строке запроса карт Google.Я знаю, что мне нужно преобразовать пробелы в строке в +, но я не уверен, где в моем коде мне нужно выполнить преобразование.

Я прочитал руководство разработчика карт Google, лучшие практики, переполнение стека и другие сайты, чтобы узнать, как создать кнопку направления карты Google.Я могу получить ссылку на Google Maps для работы, проблема заключается в том, что поисковый запрос заканчивается на первом месте, поэтому, если я пытаюсь сделать кнопку направления для "SW 2nd Ave & SW Woods St, Portland, OR 97201"ссылка будет загружать только SW 2nd Ave, а не остальную часть адреса.У меня есть жестко запрограммированный Lat / Lng для этих адресов, потому что в итоге я буду делать интерактивную карту для этой страницы, но в данный момент я просто пытаюсь заставить работать кнопку указателей.

render() {
  const walls = [{
    lat: '45.502115',
    lng: '-122.681203',
    address: 'SW 2nd Ave & SW Woods St, Portland, OR 97201',
    name: 'Lair Hill Park, Portland',
    description: 'big green wall, both sides can be used'
  },
  {
    lat: '45.512686',
    lng: '-122.792985',
    address: '1070 SW Portola Ave, Portland, OR 97225',
    name: 'Forest Hills Park',
    description: 'Short wall in the back of the park'
  },

]

  if(walls){
    return (
        <div>
          <div className="row">
            <div className="col-md-8">
                <h2><i className="fas fa-search-location"></i> Portland Walls</h2>
            </div>
            <div className="col-md-4"></div>
            <table className="table table-striped">
                <thead className="thead-inverse">
                    <tr>
                        <th>Name of location</th>
                        <th>Address</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    {walls.map(wall => (
                        <tr key={wall.id}>
                            <td>{wall.name}</td>
                            <td>{wall.address}</td>
                            <td>{wall.description}</td>
                            <td>
                                <a target="_blank" href={`https://www.google.com/maps?daddr=${wall.address}`} className="btn btn-secondary btn-sm">
                                    <i className="fas fa-arrow-circle-right"></i> Map
                                </a>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
          </div>
        </div>
      )