title: How can I map an array of coordinates into React Native Maps Markers?
body: <p>I want to map an array of geographical coordinates into React Native Maps Markers (i.e. pins). The array of data I am mapping through has about 100 values. Thus, I am expecting 97 markers to render (the API data isn't perfect). However, 0 markers appear on the Google map. Here is my code:</p>
  
  <pre><code>mapDataToMarkers() {
  const searchData = this.props.data;
  return (
    &lt;MapView style={styles.mapStyle} mapType={"mutedStandard"}&gt;
      {searchData.map((host, i) =&gt; {
          if (host.location.latitude &amp;&amp; host.location.longitude) {
            console.log("TEST", host.location.latitude);
            &lt;Marker
              key={i}
              coordinate={{
                latitude: host.location.latitude,
                longitude: host.location.longitude
              }}
              title={host.name}
              pinColor={"#ffd1dc"}
            /&gt;;
          }
        })}
    &lt;/MapView&gt;
  );
  </code></pre>
  
  <p>The <code>console.log()</code> produces 97 latitudes in my terminal, so I know the data is correct and the code is reachable. I've already tried passing an object called <em>latlng</em> to the <code>coordinate</code> prop as the documentation suggests, but to no avail. Any help would be greatly appreciated, as I never figured this would be an issue in the first place.</p>
  
  <p><a href="https://github.com/react-native-community/react-native-maps" rel="nofollow noreferrer">Click for React-Native-Maps Documentation</a></p>