MapView Markers not showing on android in after build


It is really hard to track down the cause of this problem because it only happens in the standalone android app.

I have a state ‘map’ that contains a <MapView>. While creating the ‘map’ variable that finally sets the ‘map’ state, I use a ‘marker’ state to insert markers:

let map = null;
let markerElement = this.state.marker;
map =
   latitude: lat,
   longitude: long,
   latitudeDelta: 0.0922,
   longitudeDelta: 0.0421,

I made sure that this.state.marker is set before the map initialization. Because of this, the variable markerElement is not null, even in the standalone app.

However, the markers are not displayed in the standalone app, while everything is working fine in the expo app (both on android and iOS).

For reference, here is the function for creating the marker:

_insertMarker = async () => {
        let markerContainer = [];
        let marker = [];
        let thisVar = this;
        for (let i = 0; i < this.state.partnerPositions.length; i++) {
            let markerColor = this.state.markerFarbe;
            if (this.state.partnerPositions[i][8] == "Blabla") {
                markerColor = this.state.markerFarbeBlabla;
            let aktuelleMarkerReferenz = null;
            let aktuelleMarkerID = this.state.partnerPositions[i][9];
            let lat = Number(this.state.partnerPositions[i][0]);
            let long = Number(this.state.partnerPositions[i][1]);
            if (!isNaN(lat) && !isNaN(long)) {
                console.log(lat+' '+long);
                if (lat != 0 && long != 0) {
                                latitude: Number(lat),
                                longitude: Number(long),
                            ref={marker => (markers[aktuelleMarkerID] = marker)}
                                <Callout onPress={() => this._callShowDirections(lat, long)}>
                                        <Text style={styles.mapPartnerCalloutTitel}>{this.state.partnerPositions[i][2]}</Text>
                                        <Text style={styles.mapPartnerCalloutKategorie}>{this.state.partnerPositions[i][3]}</Text>
                                        <Text style={styles.mapPartnerCalloutAnschrift}>{this.state.partnerPositions[i][4]} {this.state.partnerPositions[i][5]}</Text>
                                        <Text style={styles.mapPartnerCalloutAnschrift}>{this.state.partnerPositions[i][6]} {this.state.partnerPositions[i][7]}</Text>
                                        <View style={styles.mapPartnerCalloutNavigieren}>
                                            <Button title="Navigation starten" onPress={() => null} />
        markerContainer.push(<View key={'1-'+timestamp}>{marker}</View>);
        this.setState({marker: markerContainer}, function() {
            this._getSinglePartnerFromDB(); // This function contains above code for creating the map. I made sure that this.state.marker is set.

Any idea what I’m doing wrong and why it is working perfectly fine while debugging? API key for Google Maps is set.

Thank you! I’m starting to get insane because of this :smiley:

I finally solved it!

The coordinates were fine, except for one. I’m loading them directly from WordPress via the REST API and one lat had a space after the value. Expo seems to trim() while doing the toFloat(). However, this automatic trim() does not work in the compiled app, and parseFloat() failed. A manual trim() before parseFloat() did all the magic.

Happy to hear you averted insanity! Also, thanks for sharing your solution with the community!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.