How to change user current location blue dot color or image in react native

Question

I am using below library to show the users current location

Library using : https://github.com/react-community/react-native-maps

Above library is used to show the current location and it's showing the current location on google map. I want to change the current location blue dot icon or want to change the color of the blue dot. Can anyone here help me on how to change the blue dot color or how to change current location image ?

<MapView
 provider={ PROVIDER_GOOGLE }
 style={ styles.map }
 initialRegion={this.state.region}
 onPress={this.onMapPress}
 minZoomLevel={15}
 showsUserLocation={true}
 ref={ref => { this.mapView = ref } }
 >
</MapView>

Possible duplicate of [Android Maps API v2 Change MyLocation Icon](https://stackoverflow.com/questions/14826345/android-maps-api-v2-change-mylocation-icon) — Andrii Omelchenko, Mar 24 '18 at 15:36

score 0 · Answer 1 · answered Mar 23 '18 at 09:31

0

Is this you looking for? It's call Rendering a Marker with a custom image from your using library

<Marker
   coordinate={marker.latlng}
   image={require('../assets/pin.png')}
/>

answered Mar 23 '18 at 09:31

gaback

638
1
6
13

1

current location showing blue dot , that i want to change color of blue dot – user137418 Mar 23 '18 at 09:32
Are you using map to only show current location or more? – gaback Mar 23 '18 at 09:33
I don't see in the API that's you could change the dot. But when you use `showUserLocation`. it means you have user's location. You could make a `marker` for it and put custom image as you want. – gaback Mar 23 '18 at 09:44
There is a `Customizing the map style` in the API. But I don't see how to change the dot. Maybe you could find it `https://github.com/react-community/react-native-maps#customizing-the-map-style` there. – gaback Mar 23 '18 at 09:46
Sorry to see the downvotes, I think your answer is the best possible – Hylle Apr 04 '19 at 15:53

score 0 · Answer 2 · answered Oct 02 '18 at 07:41

0

change showUserLocation to false and then add marker using geolocation to the current location will work for you thanks

answered Oct 02 '18 at 07:41

RK_oo7

482
3
6

score 0 · Answer 3 · answered Sep 16 '19 at 08:01

0

Create a custom style for the map marker like how it shows here

answered Sep 16 '19 at 08:01

Nompumelelo

929
3
17
28

You can create a custom style for the map marker, I just did that, in iOS the default blue dot goes away but in android it is persistent. the only way that it disappear is by setting 'showUserLocation={false}' however the event 'onUserLocationChange' doesn't get called so you lose the advantage to have a changeoflocation event handler. wish there was an option to set the default blue dot or not in the case of android. – DRProgrammer Apr 21 '22 at 17:07

score 0 · Answer 4 · answered Apr 05 '20 at 17:40

Paste this code .simply

       <Marker
        draggable
        coordinate={{
          latitude: this.state.lt,
          longitude: this.state.lg,
        }}
        onDragEnd={(e) => alert(JSON.stringify(e.nativeEvent.coordinate))}
        title={'Current location'}
        description={'users current location'}
      />

In place of this.state.lt and lg place your current location latitude,longitude

How to change user current location blue dot color or image in react native

4 Answers4