[IOS] Some markers appear on top left of mapview when moving the map

[keung725]

Some markers appear on top left of mapview when moving the map but these markers have already rendered in specific coordinate correctly

var makers = annotations.map((annotation, i) => {
      return(
        <MapView.Marker
          key={i}
          coordinate={{
            longitude: annotation.longitude,
            latitude: annotation.latitude,
          }}
          image={annotation.image}
        />
      )
    });

<MapView
              ref={ref => { this.map = ref; }}
              initialRegion={this.state.region}
              followUserLocation={false}
              showsMyLocationButton={false}
              style={{
                width: screenWidth * 0.8,
                height: screenHeight / 9 * 7,
              }}
              maxDelta={0.01}
              showsUserLocation={true}
            >
              {makers}
            </MapView>

IOS
react-native-maps 0.10.1
RN 0.33

[keung725]

Top left markers:

[veliaho]

I can see the same. Did you find the reason?

[ovekyc]

Me too. Please let me know if there are any reason or solution.

[leoskyrocker]

is happening to me without the need to move the map.
OS: IOS
RN: 0.37
react-native-maps: 0.11.0

might have been happening for custom markers only.

[mmchougule]

This is happening to me as well in iOS.
react-native-maps: 0.8.2
react native: 0.32.0
Please let me know if anyone found any solution for this.

[veliaho]

I gave up waiting a solution for this. So I'm just using Image tag which works fine but not as good in performance wise when lot of markers.

            <MapView.Marker
                  key={marker.key}
                  identifier={marker.key}
                  coordinate={marker.coordinate}
            >
                <Image
                    source={marker.image}
                    style={[marker.style]}
                 />
            </MapView.Marker>

[jensellfors]

I'm seeing this issue too. I'm adding Markers with an image attribute and somehow there is always one marker stuck in the top left corner.

It can easily be reproduced. If I render a few Markers and then I remove them, the little guy in the top left corner stays... And the marker data is good.

renderUsers() {
    return this.state.users.map(marker => (
      <MapView.Marker
        key={marker.id}
        coordinate={marker.latlng}
        title={marker.title}
        description={marker.description}
        image={require('../assets/map-man.png')}
      />
    ));
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={{ flex: 1 }}
          showsUserLocation
          region={this.state.region}
          onRegionChangeComplete={(region) => this.setState({ region })}
        >
          { this.renderPins() }
          { this.renderNewPin() }
          { this.renderUsers() }
        </MapView>
      </View>
    );
  }
}

[ciAnd7]

I have same problems when markers with custom image is added after map is rendered first time. If such marker has out of screen coordinates it renders at top left corner. IMHO, it is happened because Marker implements MKAnnotation and MKAnnotationView with image property. RN add view to MKMap hierarchy, but MKMap don't track position of it because annotation has out of screen coordinates.

So, the simplest way to fix it is patch of AIRMapMarker.m reactSetFrame:

diff -u ios/AirMaps/AIRMapMarker.m /Users/ZZZ/XXX/node_modules/react-native-maps/ios/AirMaps/AIRMapMarker.m
--- ios/AirMaps/AIRMapMarker.m	2017-03-07 10:48:42.000000000 +0300
+++ /Users/ZZZ/XXX/node_modules/react-native-maps/ios/AirMaps/AIRMapMarker.m	2017-03-07 10:41:27.000000000 +0300
@@ -34,7 +34,7 @@
     // height though, we need to compensate in such a way that the bottom of the marker stays at the same spot on the
     // map.
     CGFloat dy = (bounds.size.height - self.bounds.size.height) / 2;
-    CGPoint center = (CGPoint){ self.center.x, self.center.y - dy };
+    CGPoint center = (CGPoint){ self.center.x -100, self.center.y - dy };
 
     // Avoid crashes due to nan coords
     if (isnan(center.x) || isnan(center.y) ||

It is not good enough solution and looks like 'dirty hack', but it just hide the glitch.

[EricPKerr]

Is there any followup to this? Experiencing same issue with custom marker images being placed in the top left corner of the map if the coordinates are outside the viewport.

react: 0.43.4
react-native-maps: 0.14.0

[freshnewegg]

I managed to fix it by adjusting when the MKAnnotation images were supplied. This bug appears I think when you try to change the image of an MKAnnotationView.

freshnewegg@81afd1b

it works for me, cheers

[jzhan-canva]

+1