Неправильное расположение маркера при визуализации в компоненте

Question

Я пытаюсь показать некоторые маркеры на Карте Google, используя ReactJs.

На данный момент у меня есть два фиксированных местоположения (Лондон и Париж), но позже я хочу загрузить местоположения с сервера, чтобы я мог обрабатывать их в отдельном компоненте.

По какой-то причине, когда я делаю Париж в отдельном компоненте, его помещают в угол карты. Я могу перемещать карту вокруг, масштабировать ее, но Париж все еще находится в углу.

Вот мой код:

var center = { lat: 49.1951, lng: 16.6068 }; 
var zoom = 3; 

const K_WIDTH = 40; 
const K_HEIGHT = 40; 

const greatPlaceStyle = { 
    // initially any map object has left top corner at lat lng coordinates 
    // it's on you to set object origin to 0,0 coordinates 
    position: 'absolute', 
    width: K_WIDTH, 
    height: K_HEIGHT, 
    left: -K_WIDTH/2, 
    top: -K_HEIGHT/2, 

    border: '5px solid #f44336', 
    borderRadius: K_HEIGHT, 
    backgroundColor: 'white', 
    textAlign: 'center', 
    color: '#3f51b5', 
    fontSize: 16, 
    fontWeight: 'bold', 
    padding: 4 
}; 

class PlaceMarkers extends React.Component{ 
    render(){ 
     return(
      <div style={greatPlaceStyle} lat="48.8566" lng="2.3522">Paris</div> 
     ) 
    } 
} 

class PlaceBlock extends React.Component{ 

    render(){ 

     return(
      <div> 
       <div className="thumbnail ep-map"> 
        <GoogleMap defaultCenter={center} defaultZoom={zoom}> 
        <div style={greatPlaceStyle} lat="51.5074" lng="0.1278">London</div> 
        <PlaceMarkers/> 
        </GoogleMap> 
       </div> 
      </div> 
    ) 
} 

Я очень новой для ReactJs так что может быть что-то очень простое?

Edit:

Благодаря Max я сделал несколько изменений. Теперь мои маркеры работают даже при загрузке с сервера (с использованием axios для GET). Вместо того, чтобы каждый маркер в качестве отдельного компонента, я переименовал свой компонент в GoogleMapBlock и пусть обрабатывать карты, включая маркеры:

class GoogleMapBlock extends React.Component{ 

    constructor(props) { 
     super(props); 

     this.state = { 
      markers: [] 
     }; 
    } 

    componentDidMount() { 
     axios 
     .get(getBaseUrl()+`get`) 
     .then((response) => { 
      this.setState({ 
       markers: response.data.markers 
      }); 
     }) 
     .catch((e) => 
     { 
      console.error(e); 
     }); 
    } 

    render(){ 

     var myMarkers = []; 
     var count = 1; 
     this.state.markers.forEach(function(marker){ 
      var markerId = "markerId" + count;//marker.key 
      myMarkers.push(
       <div id={markerId} style={greatPlaceStyle} lat={marker.position.lat} lng={marker.position.lng}>{marker.title}</div> 
      ); 
      count++; 
     }); 

     return(
       <div className="thumbnail ep-map"> 
        <GoogleMap defaultCenter={center} defaultZoom={zoom}> 
        {myMarkers} 
        </GoogleMap> 
       </div> 
      ); 
    } 
} 

Answer 1

Это происходит потому, что GoogleMap компонент ожидает лат и LNG подпорки под его дочерний компонент. Если посмотреть в инструменте реагировать Dev вы увидите, что есть 2 компонентов под картой Google: - ДИВ с латами и LNG - PlaceMarkers без лат и LNG (которые имеют DIV с латами и LNG)

Вам нужны набор лат и LNG реквизита для PlaceMarkers явно:

<GoogleMap defaultCenter={center} defaultZoom={zoom}> 
    <div style={greatPlaceStyle} lat="51.5074" lng="0.1278">London</div> 
    <PlaceMarkers lat="48.8566" lng="2.3522"/> 
</GoogleMap> 

Реагировать компонент представляет собой вид, поэтому его не следует использовать для хранения данных (хотя он все еще может иметь вид состояние), поэтому нам нужен реквизит - инициализировать компонент с данными. В вашем случае я предлагаю выбрать структуру хранения, как Redux, и инициализировать компоненты во время выполнения:

render() { 
    let markers = this.state.markers.map(m => <PlaceMarkers {...m}/>); 

    return <GoogleMap defaultCenter={center} defaultZoom={zoom}> 
      {markers} 
     </GoogleMap> 
} 

, где this.state.markers является массив, как [{лат: «48,8566», LNG: «2,3522» , название: "Лондон"}, ...]