Кажется, я не могу показать индекс из моего json в google-maps-react, я вижу все отмеченные маркеры, но они показывают маркер по умолчанию без всплывающего окна. Вот код с размещенным <InfoWindow>
, реакция жаловалась, что мне нужно поместить родительский div, когда я это делаю, в настоящее время я не вижу никаких маркеров.
Мой car2go json отображается правильно, просто не распечатывает name={content.name}
.
Мой компонент map.js:
import React, { Component } from "react";
import Car2go from "../data/car2go/vehicles.json";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
export class MapContainer extends Component {
constructor(props) {
super(props);
this.onMarkerClick = this.onMarkerClick.bind(this);
this.state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
name: null
};
}
onMarkerClick(props, marker, e) {
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
}
render() {
const google = window.google;
const style = {
width: "70%",
height: "70%",
margin: "0 auto"
};
//const google = window.google;
return (
<Map
google={this.props.google}
style={style}
initialCenter={{
lat: 53.59301,
lng: 10.07526
}}
zoom={12}
onClick={this.onMapClicked}
>
{Car2go.placemarks.map((content, index) => {
return (
<div>
<Marker
title={index}
name={content.name}
position={{
lat: content.coordinates[1],
lng: content.coordinates[0]
}}
onClick={this.onMarkerClick}
name={content.name}
/>
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
>
<div>
<h1>{this.state.selectedPlace.name}</h1>
</div>
</InfoWindow>
</div>
);
})}
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: "xxxxx"
})(MapContainer);