react native maps marker custom image cannot change from default

Question

I've spent about 5 hours trying to get this to work with many different permutations of code, and then rebuilding. I cannot for the life of me change the default "red pointer" marker as the default marker image in react native maps.

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

...

<MapView
    provider={PROVIDER_GOOGLE}
    style={styles.map}
    ref={ref => {this.map = ref;}}
    minZoomLevel={4}  // default => 0
    maxZoomLevel={10} // default => 20
    enableZoomControl={true}
    showsUserLocation = {true}
    showsMyLocationButton = {true}
    zoomEnabled = {true}
    initialRegion={{
        latitude: 37.600425,
        longitude: -122.385861,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
    }}
>
    <MapView.Marker
        coordinate={marker.location}
        image={require('./images/test.png')}        <------ HERE
        width={48}
        height={48}
    />
</MapView>

The images definitely exist in the right folder, I've tried different image formats png/gif/jpg/svg, I've tried using {{uri:...}} and icon/image, adding and removing width/height attributes. Nothing seems to work. I'm always getting the default red pointer.

Have I missed something obvious?

The project packager/compiler fails when I require an image that doesn't exist, or an unsupported type. It definitely can see the image, but just doesn't do anything with it. Same results on the emulator and on actual device.

image={require('./images/test.png')}

This line just does nothing, as if it's being ignored somehow.

Magnetite

Answer 1

<MapView
    provider={PROVIDER_GOOGLE}
    style={styles.container}
    region={{
        latitude: this.state.latitude,
        longitude: this.state.longitude,
    }}
    >

    <Marker
      coordinate={{
        latitude: this.state.latitude,
        longitude: this.state.longitude,
      }}
      description={"This is a marker in React Natve"}
      >

      <Image source={require('./man_marker.png')} style={{height: 35, width:35 }} />

    </Marker>

</MapView>

Reglet

This worked right away. I thought I tried a nested image in my 5 hour journey, but obviously not. Many thanks. Just need to "centre" it correctly now using the anchor points. Cheers! – Magnetite

Many, many thanks! The original docs don´t present this solution. In the docs, image is a marker prop. – Splashy

Answer 2

There are two solutions:

The first solution (recommended)

Resize your marker image with image editor(such as Photoshop,....) and use as icon in marker

To do this, you can make three photos of different sizes (YOUR_MARKER.png , [email protected] , [email protected]) (React Native automatically displays the appropriate item).

This is a good solution if you have a large number of markers.(You can refer here to clarify this)

<Marker
    coordinate={ ... }
    tracksViewChanges={false}
    icon={require('./YOUR_MARKER.png')}
/>

The second solution

As @shubham-raitka said you can use the Image inside the marker

<Marker
    coordinate={ ... }
>
    <Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35 }} />

</Marker>

In this case, if your number of markers is high (about 50 or more) the map performance will be very low.Therefore, it is not recommended to use this method

Jochbed

Answer 3

Here's an approach that worked for me in a similar situation: Use Image in place of Marker. Pop-ups work the same as with a marker. If you try this, Image is imported from react-native. The actual image is imported as:

var dotImage = require('./pathToImage.png')

<Marker
  coordinate={meter.latlng}
  title={"Parking Meter"}
  key={idx}
 >
<Image
    source={dotImage}
    style={{height: 6, width: 6}}
 />
 </Marker>

Sapsago

I saw Shubham Raitka's answer first, but this nested image tag was the solution for me. Many thanks – Magnetite

You're welcome. It's a good question that many of us have struggled over. – Sapsago

Answer 4

The way you give the width and height is a bit strange, please try with this way.

import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';

const markerImg = require('./images/test.png'); // <-- create a const with the path of the image

<------
------>
<MapView
    provider={PROVIDER_GOOGLE}
    style={styles.map}
    ref={ref => {this.map = ref;}}
    minZoomLevel={4}  // default => 0
    maxZoomLevel={10} // default => 20
    enableZoomControl={true}
    showsUserLocation = {true}
    showsMyLocationButton = {true}
    zoomEnabled = {true}
    initialRegion={{
      latitude: 37.600425,
      longitude: -122.385861,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    }}
>
<Marker
    image={markerImg} // <----- add this the const with image
    onPress={() => this.setState({ marker1: !this.state.marker1 })}
    coordinate={{
        latitude: 37.600425,
        longitude: -122.385861,
    }}
    centerOffset={{ x: -18, y: -60 }}
    anchor={{ x: 0.69, y: 1 }}
/>
</Marker>
</MapView>

I hope it works for you, works for me!

Bronchitis

I tried the static image object reference and that also didn't work for me. The nested image tag worked however from another answer – Magnetite

center-offset and anchor should be used for popups. Used for markers, users are left not knowing the real location of the marker. Offset and anchor the popup from the marker. – Sapsago

Answer 5

Not enough rep yet to just leave a comment, but the first solution works, I just had to add resizeMode or it cuts off the image if it's bigger.

<Marker
    coordinate={ ... }
>
    <Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35, resizeMode:"contain" }} />

</Marker>

Clintclintock

Answer 6

 <Marker
   coordinate={d.driverLocation}
   title={d.driverName}
   description={d.autoNumber}
   onPress={() => console.warn(d.mobaNumbers)}
   image={require("../../../assets/bee.png")}
 >
 </Marker>

Labiche

Please read "How to Answer". It helps more if you supply an explanation why this is the preferred solution and explain how it works. We want to educate, not just provide code. – Mention

Answer 7

Try this it should work

import {Image} from 'react-native';
import MapView, {Marker} from 'react-native-maps';

        <MapView
          style={styles.mapStyle}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          customMapStyle={mapStyle}>
          <Marker
            draggable
            coordinate={{
              latitude: 37.78825,
              longitude: -122.4324,
            }}
            onDragEnd={e => alert(JSON.stringify(e.nativeEvent.coordinate))}
            title={'Test Marker'}
            description={'This is a description of the marker'}>
            <Image
              source={require('./assests/custom_marker.png')}
              style={{height: 35, width: 35}}
            />
          </Marker>
        </MapView>

Hibbert

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach? – Loup

Answer 8

Personally, just adding the image in the marker didn’t work. But if you put it in a component, it works perfectly.

<MapView
    provider={PROVIDER_GOOGLE}
    style={styles.container}
    region={{
        latitude: this.state.latitude,
        longitude: this.state.longitude,
    }}
    >
    <Marker
      coordinate={{
        latitude: this.state.latitude,
        longitude: this.state.longitude,
      }}
      description={"This is a marker in React Natve"}
      >
      <View style={{position: "absolute"}}>
          <Image source={require('./man_marker.png')} style={{height: 35, width:35 }} />
      </View>
    </Marker>

</MapView>

Phonemic