CODEWITHSUNDEEP
react-native
Wilfredo Casas
Wilfredo Casas

Reputation: 489

How can I show an image instead of the default map marker?

I am trying to put a custom image or an icon of a whale instead of the default Marker that MapView gives me. However, nothing appears in the map and I get no error.

I followed an answer in another site that deals with this but this has not worked.

What can I do?

import React from "react";
import MapView from "react-native-maps";
  
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        
          <MapView.Marker
            coordinate={{ latitude: 52.78825, longitude: 13.4324 }}
            title="This should be me"
            description="Some description"
          >
            <View style={styles.myMarker}>
              <Image
                source={{ uri: "./assets/icon.png" }}
                style={{ width: 20, height: 20 }}
              />
            </View>
            
          </MapView.Marker>
        </MapView>
       
      </View>
    );
  }
}

Upvotes: 0

Views: 155

Answers (1)

Wilfredo Casas
Wilfredo Casas

Reputation: 489

I found the answer. I had to import the image like this - 

 <Marker
        coordinate={{ latitude: 52.78825, longitude: 13.4324 }}
        title="This should be me"
        description="Some description"
        image={require('../assets/icon.png')}
      >

Upvotes: 1

Related Questions