How to achieve circular marker in google map using react?

Question

I am using react-google-maps to implement map. I am able to achieve default maker in particular lat and lan

But i am trying to achieve circular marker. I am using google.maps.drawing.OverlayType.CIRCLE to achieve circular marker, but getting error

Could you please guide me how to achieve this?

Code

import React, { Component } from 'react';
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';

class HomeComponent extends Component {

    constructor(props) {
        super(props);

        this.state = {
            data: [
                { "name": "Delhi", "coordinates": { lng: 77.1025, lat: 28.7041 }, "mag": 3.3 },
                { "name": "Seoul", "coordinates": { lng: 126.9780, lat: 37.5665 }, "mag": 5.0 },
                { "name": "Shanghai", "coordinates": { lng: 121.4737, lat: 31.2304 }, "mag": 3.3 },
                { "name": "Beijing", "coordinates": { lng: 116.4074, lat: 39.9042 }, "mag": 5.0 },
                { "name": "Mumbai", "coordinates": { lng: 72.8777, lat: 19.0760 }, "mag": 3.3 },
                { "name": "Moscow", "coordinates": { lng: 37.6173, lat: 55.7558 }, "mag": 5.2 },
                { "name": "Dhaka", "coordinates": { lng: 90.4125, lat: 23.8103 }, "mag": 1.5 },
                { "name": "Kolkata", "coordinates": { lng: 88.3639, lat: 22.5726 }, "mag": 4.9 },
                { "name": "Istanbul", "coordinates": { lng: 28.9784, lat: 41.0082 }, "mag": 2.1 },
                { "name": "Tampa", "coordinates": { lng: -82.452606, lat: 27.964157 }, "mag": 3.1 },
                { "name": "canada", "coordinates": { lat: 56.1304, lng: -106.3468 }, "mag": 6.1 },
                { "name": "Karnataka", "coordinates": { lat: 15.3173, lng: 75.7139 }, "mag": 6.1 },
            ]
        }
    }

    render() {
        const GoogleMapExample = withGoogleMap(props => (
            <GoogleMap
                defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
                defaultZoom={4}
            >
                { 
                    this.state.data.map(item =>
                        <Marker
                            icon={{
                                path: google.maps.drawing.OverlayType.CIRCLE,
                                fillColor: 'red',
                                fillOpacity: .2,
                                scale: Math.pow(2, item.mag) / 2,
                                strokeColor: 'white',
                                strokeWeight: .5}
                            }
                            key={item.id}
                            title={item.name}
                            name={item.name}
                            position={{ lat: item.coordinates.lat, lng: item.coordinates.lng }}
                        />
                    )
                }
            </GoogleMap>
        ));
        return (
            <div>
                <GoogleMapExample
                    containerElement={<div style={{ height: `500px`, width: '100%' }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                />
            </div>
        );
    }
}

export default HomeComponent;

Here is link for CodeSandbox

Expected Output

Answer 1

google is not really undefined since you have included it in your index.html. In fact if you do console.log(google), you will see the object is properly accessible and is defined.

Regarding the circles, you can use google.maps.SymbolPath.CIRCLE instead of google.maps.drawing.OverlayType.CIRCLE