Customize Google Maps Blue Dot for Current Location

How to replace blue dot with my icon on google maps v2 in android?

You will have to stop using GoogleMap.setMyLocationEnabled and write a bit more code, including receiving location updates on your own and adding Circle for accuracy.

blue dot for current location in react-google-maps

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 />}
        />
    );
}

Keep current location (Bluedot image) moving in Google Maps

I make a mistake when setMyLocationEnabled = false. So set it true and my problem is solved.

---

Related Topics