Breaking News: Grepper is joining You.com. Read the official announcement!

react native mapView with Google Maps Geocoding API

Mohammad Sangare answered on November 14, 2023 Popularity 3/10 Helpfulness 3/10

answer react native mapView with Google Maps Geocoding API

react native mapView with Google Maps Geocoding API

Comment

import React, { useState } from 'react';
import { View, StyleSheet, TextInput, Button } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

const MapSearch = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [location, setLocation] = useState(null);

  const handleSearch = async () => {
    try {
      const response = await fetch(
        `https://maps.googleapis.com/maps/api/geocode/json?address=${searchQuery}&key=YOUR_GOOGLE_MAPS_API_KEY`
      );

      const data = await response.json();

      if (data.results.length > 0) {
        const result = data.results[0];
        const { formatted_address, geometry } = result;
        const { location } = geometry;

        setLocation({
          address: formatted_address,
          coordinates: {
            latitude: location.lat,
            longitude: location.lng,
          },
        });
      } else {
        setLocation(null);
      }
    } catch (error) {
      console.error('Error searching for location:', error);
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter location"
        value={searchQuery}
        onChangeText={(text) => setSearchQuery(text)}
      />
      <Button title="Search" onPress={handleSearch} />

      {location && (
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: location.coordinates.latitude,
            longitude: location.coordinates.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        >
          <Marker
            coordinate={location.coordinates}
            title={location.address}
          />
        </MapView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    margin: 10,
    paddingHorizontal: 10,
  },
  map: {
    flex: 1,
  },
});

export default MapSearch;

Popularity 3/10 Helpfulness 3/10 Language typescript

Source: chat.openai.com

Tags: api geocoding google-maps mapview react-native typescript

Link to this answer
Share Copy Link

Contributed on Nov 14 2023

Mohammad Sangare

0 Answers Avg Quality 2/10

react native mapView with Google Maps Geocoding API

Contents

More Related Answers

react native mapView with Google Maps Geocoding API

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.