MapView.Marker with custom image shows in different size on the device vs simulator

[ssimic2]

iphone 6

iphone 6 simulator

npm -v react-native-maps: 3.10.8

import orangeMarkerImg from '../assets/images/markers/48/orange.png'
<MapView.Marker
key={i}
title="Hello there"
coordinate={{
latitude: parseFloat(venue.lat),
longitude: parseFloat(venue.lng),
}}
image={orangeMarkerImg}
/>

[ssimic2]

Further, the marker is not pointing to the correct lat/lat. Potentially, it could be an additional issue.

[ochanje210]

why don't you use Image component like below

<MapView.Marker>
  <Image
    source={your_custom_image}
    style={your_custom_image_style}
  />
</MapView.Marker>

with this, you can give specific width and height to your custom marker image
Also, regarding the position which the markers are pointing to, try to give anchor prop

[ssimic2]

@ochanje210 thanks for the help.

Nesting <Image definitely helped. Now, the marker image looks the right size on both simulator and device.

The 2nd issue (wrong anchor location) is still present event after setting anchor props. Two notes:

a. Setting anchor props on <MapView.Marker does not seem to affect location of the <Image when nested in within the marker. I have used: anchor={{ x: 0.5, y: 1 }}, anchor={{ x: 0, y: 0 }}, anchor={{ x: 1, y: 1 }} . All drop the image at the same location (see image below)

b. The issue is showing up only on lower zoom levels. Both simulator and device show markers anchored to a wrong place:

Lower Zoom (Simulator)

Lower Zoom (Device)

On the higher zoom level, both device and simulator have marker anchored at the right lat/lng:

Higher Zoom (Simulator)

Higher Zoom (Device)

Maybe I am missing something obvios. If not, I will open another issue, and close this one.

[peterept]

any updates on this?

Could there some way to pass the width/height directly to the Image property on the MapView.Marker ?

[willyyang]

I've got the same issue, would love to hear some workarounds

[iiitmahesh]

@peterept @willyyang Any update??

[alvelig]

#1422 (comment)

[alvelig]

For Android custom marker stick to #1870

[rborn]

@OtacilioN don't ask the same question in multiple issues. #733 (comment)

[OtacilioN]

Okay, sorry for that! And thanks for the answer!

[Andriiseer]

I just used styles. marginBottom, marginLeft worked really good for my markers.

inNoutIcon: {
width: 30,
height: 38,
marginBottom: 35,
},

[emalazt2014]

@Andriiseer How did you make the route on the map? Thank you

[Andriiseer]

@emalazt2014 using Polyline. You can find instructions in React-Native-Maps/Polyline. I used the polyline from Gmaps API's JSON response and just rendered the array of coords using polyline. There are some limitations since "polyline_overview" in Gmaps Json isn't too precise when it comes to large distances therefore if you zoom in the path will be kind of skipping throughout the way instead of following the roads.

[emalazt2014]

I tried everything, and it only worked for me by changing the marker size

[Andriiseer]

@emalazt2014 what do you use as a marker picture? Format, Size, etc

[brownieboy]

I'm getting this issue too in a project of my own.

I haven't tried any of the workarounds here yet, but I noticed that in the example code here they don't seem to be using any of them - not that I can see anyway. And that does work for me, on the emulator at least.

[RyanTG]

@ssimic2 I know this is an ancient issue. But judging from the screenshots in your first post, the resolution of your basemap is different in the simulator and build. What basemap/tileset are you using? Perhaps in the build, the basemap density changes, and then the assets switch from @2x to @3x based off of that - or something crazy like that. So while the device should be showing @2x, it ends up showing @3x and thus they are large. Kind of a wild theory - but the differences in the basemaps is interesting.

EDIT: nevermind. I tested this, and it's not the case.

[bigo104]

This issue has been going on 3 years, how can we resolve this?

[AshHogarth]

Keeping the thread alive as I'm now having this issue. Placement is ok but size is much larger on deployment

[andrepcg]

Same issue as @AshHogarth , works fine when using expo but when running in the standalone version the icons are much larger

[AshHogarth]

@andrepcg Hey dude, sorry to hear you're having this issue, hopefully my solution can offer some assistance. Somehow somewhere I found a solution someone was doing where they actually produce an Image wrapped by the Marker tag. Below is me conditionally rendering if there are results, then produce the markers, otherwise produce a default one to encourage the user to interact

`

            {this.props.results ? this.props.results.map(marker => {          
                return (
                    <Marker
                        key={}
                        coordinate={}
                        title={}
                        onPress={}
                        opacity={}
                    >
                        <Image 
                            style={styles.marker}
                            source={require('../assets/map/marker.png')}
                        />
                    </Marker>
                )
            }) 
            : 
            <Marker 
                key={{ 
                coordinate={} 
                title="Get Searching!" 
            />

[cinder92]

@AshHogarth i don't recommend that, if are rendering 100+ pins, you will have memory leaks

[naresh-rently]

The only way to fix this is to host the required image(size accordingly) somewhere and load it to the icon property of marker mentioning the uri.

[Rohit-Parte]

<Marker key={index} coordinate={marker.latlng} title={marker.title} description={marker.description} >
    <Image style={{ width: 30, height: 30 }}  source={require('../../assets/icons/schoolbus4.png')} />
</Marker>