blue dot for current location in react-google-maps

Question

I want to add blue dot for my current location in my project. Code for my map file is this way

state is

this.state={
  currentPosition:{lat: 26.84   ,lng: 75.80},
  destinationPosition:{lat: 26.84   ,lng: 75.80}
};

handleClick for current location is

handleClick(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition((position)=>{
            this.setState(()=>({
                currentPosition:{
                    lat:position.coords.latitude,
                    lng:position.coords.longitude}}))
            console.log(position.coords.latitude);
        }); 
    }
    else{
        alert("Geoloaction is not supported by your browser");
    }
}

and render function is in this way

render(){
  const MyMapComponent = compose(
    withProps({
      googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC5VMMlyr_A6K5ycpOrq3OsVM8YYbn0q3A&v=3.exp&libraries=geometry,drawing,places",
      loadingElement: <div style={{ height: `100%` }} />,
      containerElement: <div style={{ height: `300px` }} />,
      mapElement: <div style={{ height: `100%` }} />,
    }),
    withScriptjs,
    withGoogleMap
    )((props) =>
      <GoogleMap defaultZoom={15} defaultCenter= 
        {this.state.destinationPosition} >
        <Marker position={this.state.destinationPosition} draggable 
           changeLat
           onDragEnd={this.onMarkerPositionChanged.bind(this)}
        />

        <Button bsStyle="success" onClick= 
            {this.handleClick.bind(this)}>Current Position</Button>
        </GoogleMap>
    );

    return(
      <Container 
         text={<Text lat={this.state.destinationPosition.lat} 
         lng={this.state.destinationPosition.lng}/>} 
         map={<MyMapComponent />} 
      />

    );
}

Also please tell me how can i include both marker and blue dot in my map.

Answer 1

render() {
    const MyMapComponent = compose(
        withProps({
            googleMapURL:
                'https://maps.googleapis.com/maps/api/js?key=AIzaSyC5VMMlyr_A6K5ycpOrq3OsVM8YYbn0q3A&v=3.exp&libraries=geometry,drawing,places',
            loadingElement: <div style={{ height: `100%` }} />,
            containerElement: <div style={{ height: `300px` }} />,
            mapElement: <div style={{ height: `100%` }} />
        }),
        withScriptjs,
        withGoogleMap
    )(props => (
        <GoogleMap defaultZoom={15} defaultCenter={this.state.destinationPosition}>
            <Marker
                position={this.state.destinationPosition}
                draggable
                changeLat
                onDragEnd={this.onMarkerPositionChanged.bind(this)}
            />

            //this is your current location blue dot
            //could replace it with the icon you like
            <Marker
                icon="https://www.robotwoods.com/dev/misc/bluecircle.png"
                position={this.state.currentPosition}
            />

            <Button bsStyle="success" onClick={this.handleClick.bind(this)}>
                Current Position
            </Button>
        </GoogleMap>
    ));

    return (
        <Container
            text={
                <Text
                    lat={this.state.destinationPosition.lat}
                    lng={this.state.destinationPosition.lng}
                />
            }
            map={<MyMapComponent />}
        />
    );
}