Как добавить маркеры в react-google-maps?
использование React JS в Метеор 1.5
вопрос: нужен способ добавить маркер используя react-google-maps
использование ES6 и в формате JSX
следовал документации и смог получить встроенную карту, но не смог добавить маркер.
вот мой код:
const InitialMap = withGoogleMap(props => {
var index = this.marker.index || [];
return(
<GoogleMap
ref={props.onMapLoad}
defaultZoom={14}
defaultCenter={{lat: 40.6944, lng:-73.9213}}
>
<Marker
key={index}
position={marker.position}
onClick={() => props.onMarkerClick(marker)}
/>
</GoogleMap>
)
});
export default class MapContainer extends Component{
constructor(props){
this.state = {
markers:[{
position:{
lat: 255.0112183,
lng:121.52067570000001,
}
}]
}
}
render(){
return(
<div style={{height:"100%"}}>
<InitialMap
containerElement={
<div style={{height:"100%"}}/>
}
mapElement={
<div style={{height:"100%"}} />
}
markers={this.state.markers} />
</div>
)
}
}
2 ответов
добавлена первая константа
const GettingStartedGoogleMap = withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
zoom={13}
center={{ lat: 21.178574, lng: 72.814149 }}
onClick={props.onMapClick}
>
{props.markers.map(marker => (
<Marker
{...marker}
onRightClick={() => props.onMarkerRightClick(marker)}
/>
))}
</GoogleMap>
изменен размер containerElement и размер mapElement на пиксели вместо percentage
containerElement={
<div style={{ height: `150px` }} />
}
mapElement={
<div style={{ height: `150px` }} />
}
и просто добавление маркера к функции, которая называлась
markers={this.state.markers}
Я бы снова проверил ваши координаты lat, lng. От google объясняет координаты
"проверьте, что первое число в вашей координате широты находится между -90 и 90."
также любая другая информация об ошибке было бы полезно получить ответ для вас.