react-google-mapsマーカーアイコンのカスタマイズ

Question

現在、地図コンポーネントを再利用可能コンポーネントにレンダリングしていますが、InfoModalを使用してアイコンを表示することはできますが、私は変更していない標準の赤色のGoogleマップアイコンを作成します。カスタムアイコン自分。私はES6とJSX構文で私が何をする必要があるのか​​分かりません。私はreact-google-mapsの問題を調べ、これを行う方法（おそらく単純かもしれません）がある場所に最新のものや更新されたものがあるかどうかを調べようとしましたが、反応-google-mapsにカスタムアドオンでのマーカーの作成または正しい形式。

import React, { Component } from 'react' 
import { withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps' 
import { DEFAULT_MARKER } from '../../constants/mapDefaults' 

const MapGoogleMap = withGoogleMap(props => (
    <GoogleMap 
    defaultZoom={16} 
    center={props.center} 
    > 
    {props.markers.map((marker, index) => (
     <Marker 
     key={index} 
     position={marker.position} 
     onClick={() => props.onMarkerClick(marker)} 
     > 

     {marker.showInfo && (
      <InfoWindow onCloseClick={() => props.onMarkerClose(marker)}> 
      <div>{marker.infoContent}</div> 
      </InfoWindow> 
     )} 
     </Marker> 
    ))} 
    </GoogleMap> 
)) 

export default class Map extends Component { 
    state = { 
    center: { 
     lat: 28.3421135, 
     lng: -80.6149092 
    }, 

    markers: [ 
     { 
     position: new google.maps.LatLng(28.3431165, -80.6135908), 
     showInfo: false, 
     infoContent: (
      <svg 
      id="Layer_1" 
      xmlns="http://www.w3.org/2000/svg" 
      width="16" 
      height="16" 
      viewBox="0 0 16 16" 
      > 
      <path 
       d="M3.5 0c-1.7 0-3 1.6-3 3.5 0 1.7 1 3 2.3 3.4l-.5 8c0 
       .6.4 1 1 1h.5c.5 0 1-.4 1-1L4 7C5.5 6.4 6.5 5 6.5 
       3.4c0-2-1.3-3.5-3-3.5zm10 0l-.8 5h-.6l-.3-5h-.4L11 
       5H10l-.8-5H9v6.5c0 .3.2.5.5.5h1.3l-.5 8c0 .6.4 1 1 1h.4c.6 0 
       1-.4 1-1l-.5-8h1.3c.3 0 .5-.2.5-.5V0h-.4z" 
      /> 
      </svg> 
     ) 
     }, DEFAULT_MARKER 
    ] 
    } 

    handleMarkerClick = this.handleMarkerClick.bind(this); 
    handleMarkerClose = this.handleMarkerClose.bind(this); 

    handleMarkerClick (targetMarker) { 
    this.setState({ 
     markers: this.state.markers.map(marker => { 
     if (marker === targetMarker) { 
      return { 
      ...marker, 
      showInfo: true 
      } 
     } 
     return marker 
     }) 
    }) 
    } 

    handleMarkerClose (targetMarker) { 
    this.setState({ 
     markers: this.state.markers.map(marker => { 
     if (marker === targetMarker) { 
      return { 
      ...marker, 
      showInfo: false 
      } 
     } 
     return marker 
     }) 
    }) 
    } 

    render() { 
    return (
     <MapGoogleMap 
     containerElement={ 
      <div style={{ height: `500px` }} /> 
     } 
     mapElement={ 
      <div style={{ height: `500px` }} /> 
     } 
     center={this.state.center} 
     markers={this.state.markers} 
     onMarkerClick={this.handleMarkerClick} 
     onMarkerClose={this.handleMarkerClose} 
     /> 
    ) 
    } 
} 

Answer 1

mark spread operatorはkey = {index}の上にありませんでした。これは正しいコードです。アイコン自体はmapDefaults.jsという別のファイルで定義されています。この問題を抱えている人は、私に手を差し伸べることを躊躇しないでください。

<Marker 
     {...marker} 
     key={index} 
     position={marker.position} 
     onClick={() => props.onMarkerClick(marker)} 
>