adding custom icon = google' is not defined

I cant set a new custom icon. I’m not so familier with HOC and how to use it. I tried to call <MapContainer /> and <GoogleApiWrapper /> but both gave me same error. everything else works fine if i remove the custom icons.

what did i miss?!

This is the error i get!

Line 46:  'google' is not defined  no-undef
  Line 47:  'google' is not defined  no-undef

Here is my code!

import React, { Component } from 'react';
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: {},
    }
  }
  onMarkerClick(props, marker, e) {
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
});
  }
render() {
    return (
      <Map google={this.props.google} zoom={14}>
        <Marker onClick={this.onMarkerClick}
              icon={{
            url: "/img/icon.svg",
            anchor: new google.maps.Point(32,32),
            scaledSize: new google.maps.Size(64,64)
            }}
          name={'Current location'} />
         <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}>
            <div>
              <h1>{this.state.selectedPlace.name}</h1>
            </div>
        </InfoWindow>
      </Map>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: ('A***********')
})(MapContainer)

[fl0r3k]

Found it!

In your render method add const {google} = this.props;

It should start working. If you don’t see you marker then try pointing image that is visible in internet.

[oscarmyepes]

If you want to have a custom Marker with text, styles, etc, this is what worked for me:

<Marker
   ... 
    icon={{
      url: 'data:image/svg+xml;utf8,<svg ... > ... </svg>'
    }}
>

The last part <svg … > … </svg> could be a function that return an svg and you can pass in properties.

 icon={{
    url: 'data:image/svg+xml;utf8,getCustomSvg(price, rate)'
    }}

Example

export default (price, rate) => `
<svg xmlns="http://www.w3.org/2000/svg" width="65" height="20" viewBox="0 0 65 20">
<g fill-rule="evenodd">    
    <text font-size="8.276" font-weight="bold">
        <tspan x="4" y="13">${price}</tspan>
    </text>    
    <text font-size="8.276" font-weight="bold">
        <tspan x=".37" y="8">${rate}</tspan>
    </text>
</g>
</svg>`;

Result:

Reference: https://css-tricks.com/lodge/svg/09-svg-data-uris/