Google-maps-react: adding custom icon = google' is not defined

[ehsanpo]

I cant set a new custom icon. I'm not so familier with HOC and how to use it.
I tried to call and 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]

Same here. Are we doing something wrong?

[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.

[auser]

Thanks @fl0r3k

[iruvingu]

Do anyone know how to add style to the icon??? I want it to be circular but I'm having it difficult to figure out if it's possible with that library.

[ehsanpo]

This worked for me.

<Marker
                key={marker.id}
                name={marker.name}
                position={{ lat: marker.lat, lng: marker.lon }}
                icon={{ url: "/img/" + marker.img }}
              />

[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/