Googleマップで複数のマーカーを表示してJsに反応するES6

Question

1つのマーカーを表示できますが、マップするときにループ内に新しいgoogle.maps.Markerを作成すると何も返されません。誰もこれを前にencourneredしていますか？下のコードとコードペインが添付されています。

Codepen：createMarkerでhttp://codepen.io/anon/pen/pezqKq?editors=0010

class GMap extends React.Component { 
    state = { zoom: 10 }; 

    static propTypes() { 
    initialCenter: React.PropTypes.objectOf(React.PropTypes.number).isRequired 
    } 

    render() { 
    return <div className="GMap"> 
     <div className='UpdatedText'> 
     <p>Current Zoom: { this.state.zoom }</p> 
     </div> 
     <div className='GMap-canvas' ref="mapCanvas"> 
     </div> 
    </div> 
    } 

    componentDidMount() { 
    // create the map, marker and infoWindow after the component has 
    // been rendered because we need to manipulate the DOM for Google =(
    this.map = this.createMap() 
    this.marker = this.createMarker() 
    this.infoWindow = this.createInfoWindow() 
    // have to define google maps event listeners here too 
    // because we can't add listeners on the map until its created 
    google.maps.event.addListener(this.map, 'zoom_changed',()=> this.handleZoomChange()) 
    } 

    // clean up event listeners when component unmounts 
    componentDidUnMount() { 
    google.maps.event.clearListeners(map, 'zoom_changed') 
    } 

    createMap() { 
    let mapOptions = { 
     zoom: this.state.zoom, 
     center: this.mapCenter() 
    } 
    return new google.maps.Map(this.refs.mapCanvas, mapOptions) 
    } 

    mapCenter() { 
    return new google.maps.LatLng(
     this.props.initialCenter.lat, 
     this.props.initialCenter.lng 
    ) 
    } 
createMarker() { 
const navLinks = [ 
     {location: 'Bondi Beach', lat: -33.890542, long: 151.274856}, 
     {location: 'Coogee Beach', lat: -33.923036, long: 151.259052}, 
     {location: 'Cronulla Beach', lat: -34.028249, long: 151.157507}, 
     {location: 'Manly Beach', lat: -33.80010128657071, long: 151.28747820854187} 
    ]; 
    navLinks.map((b, i) => { 
      return new google.maps.Marker({ 
      position: new google.maps.LatLng(b.lat, b.long), 
      map: this.map 
      }) 
     console.log(b.long) 
     }) 
    } 

    createInfoWindow() { 
    let contentString = "<div class='InfoWindow'>I'm a Window that contains Info Yay</div>" 
    return new google.maps.InfoWindow({ 
     map: this.map, 
     anchor: this.marker, 
     content: contentString 
    }) 
    } 

    handleZoomChange() { 
    this.setState({ 
     zoom: this.map.getZoom() 
    }) 
    } 
} 

var initialCenter = { lng: -90.1056957, lat: 29.9717272 } 

ReactDOM.render(<GMap initialCenter={initialCenter} />, document.getElementById('container')); 

Answer 1

あなたが実際には何も返していません。 navLinks.mapを返す必要があります。また、mapのreturn文の下にあるため、console.logも表示されません。

return navLinks.map((b, i) => { 
    console.log(b.long) 
    return new google.maps.Marker({ 
    position: new google.maps.LatLng(b.lat, b.long), 
    map: this.map 
    }) 
})