react-google-maps Customize Marker Icon

Question

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.

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

this is how I fixed that

let iconMarker = new window.google.maps.MarkerImage(
                    "https://lh3.googleusercontent.com/bECXZ2YW3j0yIEBVo92ECVqlnlbX9ldYNGrCe0Kr4VGPq-vJ9Xncwvl16uvosukVXPfV=w300",
                    null, /* size is determined at runtime */
                    null, /* origin is 0,0 */
                    null, /* anchor is bottom center of the scaled image */
                    new window.google.maps.Size(32, 32)
                );
                return(
                    <Marker
                        icon={iconMarker}
                        key={marker.id}
                        onClick={onClick}
                        position={{ lat: parseInt(marker.latitude), lng: parseInt(marker.longitude)}}>
                        {props.selectedMarker === marker &&
                        <InfoWindow>
                            <div style={{'color':'black'}}>
                               Shop {marker.name} {stretTexte}
                            </div>
                        </InfoWindow>}
                    </Marker>
                )

Answer 2

Franklin you can use in react google maps. It has two advantages that takes it to use over info window or simple Marker component. We have Icon options to customize our marker. We have div elements that are fully customizable. You just pass icon url. LabelStyling is optional. Feel free to ask any question.

import { MarkerWithLabel } from 'react-google-maps/lib/components/addons/MarkerWithLabel';

var markerStyling= {
  clear: "both", display: "inline-block", backgroundColor: "#00921A", fontWeight: '500',
  color: "#FFFFFF", boxShadow: "0 6px 8px 0 rgba(63,63,63,0.11)", borderRadius: "23px",
  padding: "8px 16px", whiteSpace: "nowrap", width: "160px", textAlign: "center"
};

 <MarkerWithLabel
  key={i}
  position={marker.position}
  labelAnchor={new google.maps.Point(75, 90)}
  labelStyle={markerStyling}
  icon={{
    url: '/build/icon/markPin.svg',
    anchor: new google.maps.Point(5, 58),
  }}
>
  <div>
    <p> My Marker </p>
  </div>
</MarkerWithLabel>

Answer 3

The Marker spread operator was missing above key={index}. This is the correct code. The icon itself is defined in another file called mapDefaults.js if anyone comes across this issue don't hesitate to reach out to me.

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