react-native-maps#PROVIDER_GOOGLE JavaScript Examples

The following examples show how to use react-native-maps#PROVIDER_GOOGLE. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: Map.js From deprem with GNU Lesser General Public License v3.0

5 votes

function MapDetail({ route, navigation }) {
  const [mapResult, setResult] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  fetchData = async (callback) => {
    await Axios.get('https://api.orhanaydogdu.com.tr/deprem/live.php?limit=100')
      .then(res => {
        setResult(res.data.result);

        if (typeof callback === 'function') {
          callback(res.data.result);
        }
      })
      .catch(err => alert(err));
  }

  return (
    <View>
      <View style={styles.headerView}>
        <Text style={styles.titleText}>Deprem</Text>
        <Text style={styles.subtitleText}>Güncel Deprem Haritası</Text>
        <View style={[styles.buttonView]}>
          <IconButton
            onPress={fetchData}
            name="refresh"
            color={Colors.success}
            size={40}
          />
        </View>
      </View>
      <View style={styles.contentView}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          region={{
            latitude: 40,
            longitude: 36,
            latitudeDelta: 26,
            longitudeDelta: 26,
          }}
        >
          {
            mapResult.map((item, index) => {
              return (
                <Marker key={index}
                  onPress={() => navigation.navigate('QuakeDetail', { item: item })}
                  title={item.title}
                  description={`Deprem Şiddeti: ${item.mag}`}
                  coordinate={{
                    latitude: item.lat,
                    longitude: item.lng
                  }}
                >
                </Marker>
              );
            })
          }
        </MapView>
      </View>
    </View>
  );
}

Example #2

Source File: MapDetail.js From deprem with GNU Lesser General Public License v3.0

5 votes

function MapDetail({ route, navigation }) {
  searchGoogle = () => {
    Linking.openURL(`https://www.google.com/search?q=${route.params.item.title}`)
  }
  return (
    <View>
      <View style={styles.headerView}>
        <IconButton
          onPress={() => navigation.goBack()}
          name="arrow-left"
          style={styles.backIconButton}
          color={Colors.white}
        />

        <Text style={styles.titleText}>Deprem Haritası</Text>
        <Text style={styles.subtitleText}>{route.params.item.title}</Text>
        <View style={[styles.buttonView]}>
          <IconButton
            onPress={searchGoogle}
            name="map-search"
            color={Colors.success}
            size={40}
          />
        </View>
      </View>
      <View style={styles.contentView}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          region={{
            latitude: route.params.item.lat,
            longitude: route.params.item.lng,
            latitudeDelta: 1,
            longitudeDelta: 1,
          }}
        >
          <Marker
            title={route.params.item.title}
            description={`Deprem Şiddeti: ${route.params.item.mag}`}
            coordinate={{
              latitude: route.params.item.lat,
              longitude: route.params.item.lng
            }}
          />
        </MapView>

      </View>
    </View>
  );
}