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

[MurilloPaganiMartins]

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.

could you elaborate on the "If you don't see you marker then try pointing image that is visible in internet" ? im having this problem but cant understand what to do

[fl0r3k]

@MurilloPaganiMartins

Something like this:

<Marker
                key={marker.id}
                name={marker.name}
                position={{ lat: marker.lat, lng: marker.lon }}
                icon={{ url: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Bus_stop_symbol.svg/1112px-Bus_stop_symbol.svg.png" }}
              />