Googleマップでreact jsで複数のマーカーを表示するにはどうすればよいですか？

Question

私はReact jsを使用しています。ここに私のコードです -

import React, {PropTypes} from 'react'; 
import {GoogleMapLoader, GoogleMap, Marker} from 'react-google-maps'; 
import _ from 'lodash'; 

class MapContainer extends React.Component { 

    render() { 
    return (
     <section className="searchInput-MapScreen"> 
     <GoogleMapLoader 
      containerElement={ 
      <div 
       style={{ 
       height: `100%` 
       }} 
      /> 
      } 
      googleMapElement={ 
      <GoogleMap 
       defaultZoom={10} 
       //defaultCenter={{ lat: latitude, lng: longitude }} 
      > 
      {_.map(this.props.areas, (a, i) => { 
       let lat = parseFloat(a.lat.replace('"','').replace('"','')); 
       let lon = parseFloat(a.lon.replace('"','').replace('"','')); 
       console.log(lat) 
       console.log(lon) 
       return (
       <Marker key={i} 
        position={{ lat : lat, lng : lon }} 
        defaultAnimation={2} 
       /> 
      ) 
      })} 
      </GoogleMap> 
      } 
     /> 
     </section> 
    ) 
    } 
} 

MapContainer.propTypes = { 
    areas: PropTypes.array 
} 

export default MapContainer 

Google Mapが表示されていません。緯度と経度の値が来ている場合は、コンソールにコードが追加されています。しかし、地図はまだページに表示されません。

Answer 1

私はこれを自分で修正できました。

他の理由から、上記の問題に対する解決策があります。

defaultCenter={{ lat: latitude, lng: longitude }}

これは、これは地図を表示するために必要とされるべきではない、上記のコードにコメントしました。

デフォルトの中心の緯度と経度はそれに応じてハードコードすることができます。

新しいコードがなる -

import React, {PropTypes} from 'react'; 
    import {GoogleMapLoader, GoogleMap, Marker} from 'react-google-maps'; 
    import _ from 'lodash'; 

    class MapContainer extends React.Component { 

     render() { 
     return (
      <section className="searchInput-MapScreen"> 
      <GoogleMapLoader 
       containerElement={ 
       <div 
        style={{ 
        height: `100%` 
        }} 
       /> 
       } 
       googleMapElement={ 
       <GoogleMap 
        defaultZoom={10} 
        defaultCenter={{ lat: <somevalue>, lng: <somevalue>}} 
       > 
       {_.map(this.props.areas, (a, i) => { 
        let lat = parseFloat(a.lat.replace('"','').replace('"','')); 
        let lon = parseFloat(a.lon.replace('"','').replace('"','')); 
        console.log(lat) 
        console.log(lon) 
        return (
        <Marker key={i} 
         position={{ lat : lat, lng : lon }} 
         defaultAnimation={2} 
        /> 
       ) 
       })} 
       </GoogleMap> 
       } 
      /> 
      </section> 
     ) 
     } 
    } 

    MapContainer.propTypes = { 
     areas: PropTypes.array 
    } 

    export default MapContainer 

この上でいくつかのより多くの情報を追加するために、私は郵便番号を使用してエリアを検索するために、このコンポーネントを使用していました。 郵便番号が2000の場合は、マップ上のすべての領域をこの郵便番号でマークする必要があります。

これは他の誰かを助けてくれるでしょう！

ありがとうございました