Google-карты-реагировать не загружается карта - PullRequest
Новая
       22

Google-карты-реагировать не загружается карта

1 голос
/ 23 июня 2019

Когда я пытаюсь загрузить компонент с помощью Google Maps (реквизиты были переданы компоненту, как и ожидалось), я просто получаю сообщение о том, что "Loading map...", но карта с маркерами не была загружена. В консоли также нет ошибок. Вот этот компонент. Что я тут не так делаю? 

import React, {Component} from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
import { Constants } from './../../utils/constants';

export class MapContainer extends Component {

    state = {
        selectedPlace: ''
    }

    onMarkerClick = (e) => {
        this.setState({selectedPlace: e.Name});
    }

  render() {
    return (
      <Map 
        google={this.props.google}
        style={{width: '20vw', height: '45vh', 'top': '1.5rem'}}
        containerStyle={{width: '20vw', height: '30vh'}}
        initialCenter={{
          lat: this.props.lat,
          lng: this.props.lng
        }}
        zoom={15}>
        {this.props.markers.length > 0 && // Rendering multiple markers for 
          this.props.markers.map((m) => {
            return (<Marker 
                      onClick={this.onMarkerClick}
                      name={this.state.selectedPlace}
                      position={{ lat: m.Latitude, lng: m.Longitude }}
                      key={m.Name} />);
          })
        }

        {this.props.markers && // Rendering single marker for supplier details map
          <Marker onClick={this.onMarkerClick}
                name={this.state.selectedPlace} />
        }

        <InfoWindow onClose={this.onInfoWindowClose}>
              <h4>{this.state.selectedPlace}</h4>
        </InfoWindow>
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: (Constants.GoogleMapsApiKey),
  language: "RU"
})(MapContainer)

Ответы [ 2 ]

2 голосов
/ 26 июня 2019

В своей демонстрации codeandbox вы экспортируете компонент приложения, куда вам необходимо его визуализировать. 

export default GoogleApiWrapper({
  apiKey: "",
  language: "RU"
})(App);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Здесь вы визуализируете компонент приложения, который не обернут GoogleApiWrapper HOC. Вместо того, чтобы экспортировать упакованное приложение, создайте его следующим образом: 

App = GoogleApiWrapper({
  apiKey: "",
  language: "RU"
})(App);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
0 голосов
/ 25 июня 2019

попробуйте установить ширину и высоту карты в пикселях 

style={{width: '200px', height: '450px', 'top': '1.5rem'}}
...