Membuat Place AutoComplete Menggunakan Google Map Berbasis Android

Google Developers menyediakan Places SDK untuk memungkinkan developer membuat aplikasi Map yang merespon secara kontektual untuk bisnis lokal dan tempat lain di dekat perangkat, pengembang dapat membangun aplikasi berdasarkan tempat-tempat berarti bagi pengguna.

Antarmuka yang ditawarkan untuk Places SDK untuk android

  • Places menyediakan akses terprogram ke basis data Google tentang tempat dan informasi bisnis lokal, serta tempat perangkat saat ini.
  • Autocomleate menyediakan widget yang sudah jadi untuk mengembalikan prediksi tempat sebagai respons terhadap permintaan pencarian pengguna.

Sebuah tempat didefinisikan sebagai ruang fisik yang memiliki nama. Cara lain untuk berpikir tetang suatu tempat adalah apa pun yang dapat anda temukan di peta. Contohnya termasuk bisnis lokal, tempat menarik, dan lokasi geografis. Di API, tempat diwakili oleh Place antarmuka. Ini mencangkup informasi seperti nama tempat dan alamat, lokasi georafis, ID tempat, nomer telepon, jenis tempat, URL situs web, dan banyak lagi.

Langkah-langkah membuat Place AutoComplete

  • Pertama yang harus anda lakukan membuat project baru, jika sudah tambahkan dependencies google map SDK

    implementation 'com.google.android.gms:play-services-maps:16.1.0'
    implementation 'com.google.android.gms:play-services-location:16.0.0'
    implementation 'com.google.android.gms:play-services-places:16.0.0'
    implementation 'com.google.android.libraries.places:places-compat:1.1.0'

  • Kemudian dibagian file AndroidManifest.xml tambahkan uses permission

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

  • Langkah selanjutnya membuat kunci Google Maps API dari sini

  • Tambahkan kunci API tersebut di dalam file AndroidManifest.xml (app/manifests/AndroidManifest.xml)

<manifest .. >
    <application .. >

     <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="@string/google_maps_key" />

    </application>
</manifest>
  • Buat design bagian layout dan masukan MapFragment, diginakan untuk menampilkan map, masukan attribute id dan masukan attribute class dari com.google.android.gms.maps.MapFragment
<fragment
   android:id="@+id/map"
   class="com.google.android.gms.maps.MapFragment"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />
  • Langkah selanjutnya adalah membuat class di bagian java package kemudian masukan kode dibawah

    package com.kodetr.googlemap;
    
    import android.os.Bundle;
    import android.support.v4.app.FragmentActivity;
    
    import com.google.android.gms.maps.CameraUpdateFactory;
    import com.google.android.gms.maps.GoogleMap;
    import com.google.android.gms.maps.MapFragment;
    import com.google.android.gms.maps.OnMapReadyCallback;
    import com.google.android.gms.maps.model.BitmapDescriptorFactory;
    import com.google.android.gms.maps.model.LatLng;
    import com.google.android.gms.maps.model.MarkerOptions;
    
    public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {
    
        private GoogleMap mMap;
        private LatLng sydney = new LatLng(-8.579892, 116.095239);
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_maps);
    
            MapFragment mapFragment = (MapFragment) getFragmentManager().findFragmentById(R.id.map);
            mapFragment.getMapAsync(MapsActivity.this);
        }
    
        @Override
        public void onMapReady(GoogleMap googleMap) {
            mMap = googleMap;
            mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, 8.5f));
            mMap.addMarker(new MarkerOptions()
                    .position(sydney)
                    .title("kodetr")
                    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_RED)));
        }
    }
    Jika di RUN maka tampilan seperti berikut

  • Kemudian menambahkan search place AutoComplete dibagian layout dengan menambahkan fragment dari PlaceAutocompleteFragment

    <fragment
        android:id="@+id/place_autocomplete_fragment"
        android:name="com.google.android.libraries.places.compat.ui.PlaceAutocompleteFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

  • Kemudian beralih ke bagian java class untuk menerapkan proses dari Place Autocomplete, buat method seperti dibawah kemudian panggil dibagian onCreate

private void setupAutoCompleteFragment() {
    PlaceAutocompleteFragment autocompleteFragment = (PlaceAutocompleteFragment)
        getFragmentManager().findFragmentById(R.id.place_autocomplete_fragment);
        autocompleteFragment.setOnPlaceSelectedListener(new PlaceSelectionListener() {
        @Override
        public void onPlaceSelected(Place place) {
            
        }

        @Override
        public void onError(Status status) {
            Log.e("Error", status.getStatusMessage());
        }
    });
}
  • Jika semua langkah sudah dikerjakan maka untuk semua sorce code bagian Manifest, design Layout dan java class seperti berikut

    Manifest

    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.kodetr.googlemap">
    
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    
        <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
    
            <!--
                 The API key for Google Maps-based APIs is defined as a string resource.
                 (See the file "res/values/google_maps_api.xml").
                 Note that the API key is linked to the encryption key used to sign the APK.
                 You need a different API key for each encryption key, including the release key that is used to
                 sign the APK for publishing.
                 You can define the keys for the debug and release targets in src/debug/ and src/release/.
            -->
            <meta-data
                android:name="com.google.android.geo.API_KEY"
                android:value="@string/google_maps_key" />
    
            <activity android:name=".MapsActivity">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
    
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    </manifest>

Layout (activity_maps.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MapsActivity">

    <fragment
        android:id="@+id/map"
        class="com.google.android.gms.maps.MapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@android:color/white">

        <fragment
            android:id="@+id/place_autocomplete_fragment"
            android:name="com.google.android.libraries.places.compat.ui.PlaceAutocompleteFragment"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>

Java Class (MapsActivity)

package com.kodetr.googlemap;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.util.Log;

import com.google.android.gms.common.api.Status;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.libraries.places.compat.Place;
import com.google.android.libraries.places.compat.ui.PlaceAutocompleteFragment;
import com.google.android.libraries.places.compat.ui.PlaceSelectionListener;

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {

    private GoogleMap mMap;
    private LatLng sydney = new LatLng(-8.579892, 116.095239);
    private MapFragment mapFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
        mapFragment = (MapFragment) getFragmentManager().findFragmentById(R.id.map);
        setupAutoCompleteFragment();
    }


    private void setupAutoCompleteFragment() {
        PlaceAutocompleteFragment autocompleteFragment = (PlaceAutocompleteFragment)
                getFragmentManager().findFragmentById(R.id.place_autocomplete_fragment);
        autocompleteFragment.setOnPlaceSelectedListener(new PlaceSelectionListener() {
            @Override
            public void onPlaceSelected(Place place) {
                sydney = place.getLatLng();
                mapFragment.getMapAsync(MapsActivity.this);
            }

            @Override
            public void onError(Status status) {
                Log.e("Error", status.getStatusMessage());
            }
        });
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
        mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, 8.5f));
        mMap.addMarker(new MarkerOptions()
                .position(sydney)
                .title("www.kodetr.com")
                .snippet("Lokasi dimataram")
                .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_RED)));
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (mMap != null) {
            mMap.clear();
        }
    }
}

Jika di RUN maka ada penambahan dari PlaceAutocomplete yaitu inputan pencarian

kemudian jika melakukan pencarian maka akan muncul fragment dialog dari PlaceAutocomplete yang berisi lokasi yang diload dari databases google.

Demikian yang dapat saya sampaikan dari artikel ini semoga bermanfaat, jika ada yang ditanyakan silahkan di kolom komentar dibawah, selamat mencoba.

Share Comments
comments powered by Disqus