react-nativegoogle-maps-markersreact-native-maps

react native maps marker custom image cannot change from default


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.


Solution

  • <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>