Google map исчезает из Bootstrap modal

Я пытаюсь отобразить карту Google внутри мода Bootstrap в приложении React.Google map исчезает из Bootstrap modal

Мой модальный покажет карту только тогда, когда this.props.showMap установлен, например, так:

export default class MapModal extends Component { 
    ... 

    componentDidMount() { 
    var map = new google.maps.Map(document.getElementById("map"), {...}); 
    $('#myModal').on('shown.bs.modal',() => { 
     google.maps.event.trigger(map, "resize"); 
    }); 
    } 
    render() { 
     return (
     <div className = 'modal fade' id = 'myModal' role = 'dialog'> 
      <div className = 'modal-dialog'> 
      <div className = 'modal-content'> 
      ... 
      { 
       this.props.showMap ? 
       <div id = 'map' /> 
       : 
       null 
      } 
      </div> 
     </div> 
     </div> 
    ) 
    } 
}

Кнопка, которая открывает модальное, как так:

<MapModal showMap={this.state.showMap} /> 
... 

<button 
    type="button" 
    onClick={() => { this.setState({ showMap: true }); } } 
    data-toggle="modal" 
    data-target="#myModal" 
    > 
    Show 
</button>

Модальное отображает карту правильно , если я не переключу значение this.state.showMap от true до false.

Например, когда я открываю модальный код this.state.showMap как false, карта удаляется из модального (как и ожидалось). Но когда я снова пытаюсь открыть модальный, с this.state.showMap как true, карта все еще не отображается.

В каком месте я ошибаюсь?

источник

2017-01-11 Anubhav Dhawan

Как вы меняете состояние showMap при повторном открытии, и проверили ли вы, что значение действительно меняется? – Jayce444

@ Jayce444 На самом деле, это не состояние, это реквизит, который проверяется в состоянии. И 'this.props.showMap' устанавливается при открытии модального. Я сейчас обновил вопрос :) –

Думаю, вам нужно выполнить код инициализации для карты после создания элемента dom с картой id. –

Поскольку при изменении showMap на false вы уже удалили карту из объекта Dom. Таким образом, вы должны снова запустить карту.
В качестве альтернативы вы можете добавить класс css или встроенный стиль для отображения или скрыть карту вместо рендеринга null.

источник

2017-01-11 11:02:44

Google map исчезает из Bootstrap modal

ответ

Смежные вопросы