text: import React from 'react'
  import { connect } from 'react-redux'
  import { View } from 'react-native'
  import MapView from 'react-native-maps'
  import { calculateRegion } from '../Lib/MapHelpers'
  import MapCallout from '../Components/MapCallout'
  import Styles from './Styles/MapviewExampleStyle'
  
  /* ***********************************************************
  * IMPORTANT!!! Before you get started, if you are going to support Android,
  * PLEASE generate your own API key and add it to android/app/src/main/AndroidManifest.xml
  * We've included our API key for demonstration purposes only, and it will be regenerated from
  * time to time. As such, neglecting to complete this step could potentially break your app in production!
  * https://console.developers.google.com/apis/credentials
  * Also, you'll need to enable Google Maps Android API for your project:
  * https://console.developers.google.com/apis/api/maps_android_backend/
  *************************************************************/
  
  class MapviewExample extends React.Component {
    /* ***********************************************************
    * This example is only intended to get you started with the basics.
    * There are TONS of options available from traffic to buildings to indoors to compass and more!
    * For full documentation, see https://github.com/lelandrichardson/react-native-maps
    *************************************************************/
  
    constructor (props) {
      super(props)
      /* ***********************************************************
      * STEP 1
      * Set the array of locations to be displayed on your map. You'll need to define at least
      * a latitude and longitude as well as any additional information you wish to display.
      *************************************************************/
      const locations = [
        { title: 'HOSPITAL ISRAELITA SOC.BENEF.ISRAELITA DO RJ', latitude: -22.91555, longitude: -43.22425 },
        { title: 'HOSPITAL SANTA CRUZ - SOC.PORT.DE BENEF.DE NITEROI', latitude: -22.89454, longitude: -43.1175 },
        { title: 'OBRA PORTUGUESA DE ASSISTENCIA', latitude: -22.91287, longitude: -43.19123 },
        { title: 'PRONTOBABY LTDA - CLINICA INFANTIL DE URGENCIA', latitude: -22.92105, longitude: -43.23246 },
      ]
      /* ***********************************************************
      * STEP 2
      * Set your initial region either by dynamically calculating from a list of locations (as below)
      * or as a fixed point, eg: { latitude: 123, longitude: 123, latitudeDelta: 0.1, longitudeDelta: 0.1}
      *************************************************************/
      const region = calculateRegion(locations, { latPadding: 0.05, longPadding: 0.05 })
      this.state = {
        region,
        locations,
        showUserLocation: true
      }
      this.renderMapMarkers = this.renderMapMarkers.bind(this)
      this.onRegionChange = this.onRegionChange.bind(this)
    }
  
    componentWillReceiveProps (newProps) {
      /* ***********************************************************
      * STEP 3
      * If you wish to recenter the map on new locations any time the
      * Redux props change, do something like this:
      *************************************************************/
      // this.setState({
      //   region: calculateRegion(newProps.locations, { latPadding: 0.1, longPadding: 0.1 })
      // })
    }
  
    onRegionChange (newRegion) {
      /* ***********************************************************
      * STEP 4
      * If you wish to fetch new locations when the user changes the
      * currently visible region, do something like this:
      *************************************************************/
      // const searchRegion = {
      //   ne_lat: newRegion.latitude + newRegion.latitudeDelta,
      //   ne_long: newRegion.longitude + newRegion.longitudeDelta,
      //   sw_lat: newRegion.latitude - newRegion.latitudeDelta,
      //   sw_long: newRegion.longitude - newRegion.longitudeDelta
      // }
      // Fetch new data...
    }
  
    calloutPress (location) {
      /* ***********************************************************
      * STEP 5
      * Configure what will happen (if anything) when the user
      * presses your callout.
      *************************************************************/
      console.tron.log(location)
    }
  
    renderMapMarkers (location) {
      /* ***********************************************************
      * STEP 6
      * Customize the appearance and location of the map marker.
      * Customize the callout in ../Components/MapCallout.js
      *************************************************************/
  
      return (
        <MapView.Marker key={location.title} coordinate={{latitude: location.latitude, longitude: location.longitude}}>
          <MapCallout location={location} onPress={this.calloutPress} />
        </MapView.Marker>
      )
    }
  
    render () {
      return (
        <View style={Styles.container}>
          <MapView
            style={Styles.map}
            initialRegion={this.state.region}
            onRegionChangeComplete={this.onRegionChange}
            showsUserLocation={this.state.showUserLocation}
          >
            {this.state.locations.map((location) => this.renderMapMarkers(location))}
          </MapView>
        </View>
      )
    }
  }
  
  const mapStateToProps = (state) => {
    return {
      // ...redux state to props here
    }
  }
  
  export default connect(mapStateToProps)(MapviewExample)
  