title: react-google-maps Customize Marker Icon
body: <p>Currently, I have rendered the map component into a reusables component successfully using InfoModal to show an icon, however, the standard red Google Map icon I have not modified, and I want to create a custom icon myself. I'm not sure with ES6 and JSX syntax what I need to do. I looked into react-google-maps Issues and attempted to see if there were any current or updated material anywhere for how to do this (which is probably simple), but I'm not sure if react-google-maps has something for custom marker creation in addons or the correct format. </p>
  
  <pre><code>import React, { Component } from 'react'
  import { withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps'
  import { DEFAULT_MARKER } from '../../constants/mapDefaults'
  
  const MapGoogleMap = withGoogleMap(props =&gt; (
    &lt;GoogleMap
      defaultZoom={16}
      center={props.center}
    &gt;
      {props.markers.map((marker, index) =&gt; (
        &lt;Marker
          key={index}
          position={marker.position}
          onClick={() =&gt; props.onMarkerClick(marker)}
        &gt;
  
          {marker.showInfo &amp;&amp; (
            &lt;InfoWindow onCloseClick={() =&gt; props.onMarkerClose(marker)}&gt;
              &lt;div&gt;{marker.infoContent}&lt;/div&gt;
            &lt;/InfoWindow&gt;
          )}
        &lt;/Marker&gt;
      ))}
    &lt;/GoogleMap&gt;
  ))
  
  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: (
            &lt;svg
              id="Layer_1"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 16 16"
            &gt;
              &lt;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"
              /&gt;
            &lt;/svg&gt;
          )
        }, DEFAULT_MARKER
      ]
    }
  
    handleMarkerClick = this.handleMarkerClick.bind(this);
    handleMarkerClose = this.handleMarkerClose.bind(this);
  
    handleMarkerClick (targetMarker) {
      this.setState({
        markers: this.state.markers.map(marker =&gt; {
          if (marker === targetMarker) {
            return {
              ...marker,
              showInfo: true
            }
          }
          return marker
        })
      })
    }
  
    handleMarkerClose (targetMarker) {
      this.setState({
        markers: this.state.markers.map(marker =&gt; {
          if (marker === targetMarker) {
            return {
              ...marker,
              showInfo: false
            }
          }
          return marker
        })
      })
    }
  
    render () {
      return (
        &lt;MapGoogleMap
          containerElement={
            &lt;div style={{ height: `500px` }} /&gt;
          }
          mapElement={
            &lt;div style={{ height: `500px` }} /&gt;
          }
          center={this.state.center}
          markers={this.state.markers}
          onMarkerClick={this.handleMarkerClick}
          onMarkerClose={this.handleMarkerClose}
        /&gt;
      )
    }
  }
  </code></pre>