Example usage for react-native-maps

react-native-maps-example.jsx

import React from 'react';
import * as Na from 'native-base';
import { View, Image } from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import mapStyle from './mapStyle';

/*
	Google Maps iOS API Key: AIzaSyCORnMnmibA-blbUrcW4RRtrlr4xWu_G60
	Google Maps Android API Key: AIzaSyDe-trUbugoWigSlaOSQUWo6yQwRSaC1ns
*/

export default class WellsMap extends React.Component {
  static navigationOptions(navigation){
    return { title: 'Map' }
  }

  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      wells: [],
    }
  }

  componentDidMount() {
    fetch(BaseAPI + '/wells')
    .then((response) => response.json()).then((r) => {
      if(r.status == 'error') alert(r.message);
      else {
        this.setState({
          loading: false,
          wells: r.data
        })
      }
    }).catch((error) => { console.error(error); });
  }
    
  renderCallout(well) {
    return (
      <View>
        <Na.H3>{well.title}</Na.H3>
        <Image source={{uri: well.image.uri}} style={{height: 200, width: null, flex: 1}}/>
      </View>
    )
  }

	renderMarkers() {
		return this.state.wells.map(well => (
			<MapView.Marker coordinate={{latitude: 47.368232, longitude: 8.542580}}>
        <MapView.Callout onPress={() => {this.props.navigation.navigate('WellDetails', well)}}>
          {this.renderCallout(well)}
        </MapView.Callout>
      </MapView.Marker>
		));
	}
  render() {
    if(this.state.loading) return ( <Na.Spinner color='black' /> );
    return (
      <Na.Container>
        <Na.Content>
				  <MapView
				  	style={{flex: 1, height: 500}}
				  	customMapStyle={mapStyle}
						provider={PROVIDER_GOOGLE}
				    initialRegion={{
				      latitude: 47.368232,
				      longitude: 8.542580,
				      latitudeDelta: 0.0222,
				      longitudeDelta: 0.0121,
				    }}>
				    	{this.renderMarkers()}
				    </MapView>

        </Na.Content>
      </Na.Container>
    );
  }

}