Maps dan Google Places Autocomplete pada React Native(Android) part 2

Pada bagian pertama telah kita bahas mengenai membuat maps menggunakan react native maps dan react native google places auto complete. Namun pada bagian pertama kita hanya membahas bagaimana menggunakan library tersebut secara terpisah. Pada bagian ini tidak akan dibahas bagaimana memasang (install) dan menggunakan library tersebut karena sudah dibahas pada bagian pertama dan hanya akan membahas bagaimana menggunakan kedua library tersebut secara bersama-sama sehingga maps pada aplikasi kita dapat berjalan dengan lebih baik dan lebih interaktif kepada pengguna.

Untuk menggunakan kedua library ini secara bersama-sama kita perlu suatu state (variabel) yang nantinya akan digunakan pada library ini. State yang perlu kita gunakan yaitu state untuk region yang digunakan oleh library react-native maps untuk menampilkan koordinat lokasi yang diinputkan. Inisialisasi state region dapat dibuat kurang lebih seperti ini

constructor(props) {
    super(props);
    this.state = {
      mapRegion: null,
      latitude: null,
      longitude: null
  };
}

Kemudian kita perlu suatu fungsi untuk mengubah state region untuk input yang telah dimasukkan.

onRegionChange(region, latitude, longitude) {
    this.setState({
      mapRegion: region,
      // If there are no new values set the current ones
      latitude: latitude || this.state.latitude,
      longitude: longitude || this.state.longitude
   });
 }

Setelah itu kita atur onClick pada library google places auto complete untuk memanggil fungsi onRegionChange yang telah kita buat tadi

<GooglePlacesAutocomplete
    placeholder='Enter Location'
    minLength={2}
    autoFocus={false}
    fetchDetails
    listViewDisplayed='auto'
    query={{
         key: 'TAMBAHKAN API DISINI',
         language: 'en',
         types: 'geocode',
    }}
    currentLocation={false}
    onPress={(data, details = null) => {
      const region = {
        latitude: details.geometry.location.lat,
        longitude: details.geometry.location.lng,
        latitudeDelta: 0.00922 * 1.5,
        longitudeDelta: 0.00421 * 1.5
      };
      this.onRegionChange(region, region.latitude, region.longitude);
    }}
 />

Pada MapView kita harus mengatur bahwa region yang ditampilkan merupakan state region yang dapat diubah oleh MapView maupun google places auto complete.

<MapView
 style={{ flex: 1, width: window.width }
 region={this.state.mapRegion}
 onRegionChange={(regions) => {
   this.setState({
     mapRegion: regions
   });
 }}
 onPress={(e) => {
   const region = {
        latitude: e.nativeEvent.coordinate.latitude,
        longitude: e.nativeEvent.coordinate.longitude,
        latitudeDelta: 0.00922 * 1.5,
        longitudeDelta: 0.00421 * 1.5
      }
   this.onRegionChange(region, region.latitude, region.longitude);
 }}
>
 <MapView.Marker
   coordinate={{
     latitude: (this.state.latitude),
     longitude: (this.state.longitude),
   }}
   title="Lokasi"
   description="Hello"
 />
</MapView>

Apabila kita menuliskan semua kode kita dengan benar maka tampilan nya dapat dilihat pada gambar berikut.

Kemudian apabila kita memasukkan input teks pada map akan muncul suggestion tempat yang didukung oleh google places auto complete.

Kemudian set region akan terpanggil apabila kita memilih suggestion yang ditampilkan oleh google places auto complete.

Demikian cara menggunakan dua library ini secara bersama-sama. Pada hal ini yang perlu diperhatikan adalah state region dan latitude, longitude agar kedua library ini dapat saling berkomunikasi.

Selamat mencoba!! :)