Skip to content Skip to sidebar Skip to footer

Autocomplete Search Bar In Google Maps

I'm creating an app based on places search. I would like to know how can I add a search bar into my Google Map, where the user can select a Place, and I can capture what the user c

Solution 1:

You can simply use a PlaceAutoCompleteFragment.

First ensure that you're using the latest version of Google Play Services (Version 8.4.0 and up includes the PlaceAutoCompleteFragment class):

compile'com.google.android.gms:play-services-maps:11.0.2'compile'com.google.android.gms:play-services-location:11.0.2'compile'com.google.android.gms:play-services-places:11.0.2'

Then include the PlaceAutoCompleteFragment in your xml layout:

<LinearLayoutxmlns: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"android:orientation="vertical"android:weightSum="1"><fragmentandroid:id="@+id/place_autocomplete"android:layout_width="match_parent"android:layout_height="wrap_content"android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
        /><fragmentandroid:id="@+id/map"class="com.google.android.gms.maps.SupportMapFragment"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout>

Then set up a listener in your Activity:

import com.google.android.gms.common.api.Status;
import com.google.android.gms.location.places.Place;
import com.google.android.gms.location.places.ui.PlaceAutocompleteFragment;
import com.google.android.gms.location.places.ui.PlaceSelectionListener;

publicclassMapsActivityextendsAppCompatActivityimplementsOnMapReadyCallback {

    private GoogleMap mMap;
    PlaceAutocompleteFragment placeAutoComplete;

    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);

        placeAutoComplete = (PlaceAutocompleteFragment) getFragmentManager().findFragmentById(R.id.place_autocomplete);
        placeAutoComplete.setOnPlaceSelectedListener(newPlaceSelectionListener() {
            @OverridepublicvoidonPlaceSelected(Place place) {

                Log.d("Maps", "Place selected: " + place.getName());
            }

            @OverridepublicvoidonError(Status status) {
                Log.d("Maps", "An error occurred: " + status);
            }
        });

        SupportMapFragmentmapFragment= (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    @OverridepublicvoidonMapReady(GoogleMap googleMap) {
        mMap = googleMap;
    }
}

When you run this code, you'll see the AutoComplete bar above the Google Map:

enter image description here

When you click on the AutoComplete bar, it will look like this:

enter image description here

Then, start typing, and select a Place:

enter image description here

When you tap on a place to select it, you will see the log from the PlaceSelectionListener:

D/Maps: Place selected: San Francisco

Solution 2:

Yes, you can do that by make method for addMarker when you press on the place, You can use this code:

publicclassPlaceAutocompleteActivityextendsAppCompatActivityimplementsOnMapReadyCallback {

    privateGoogleMap mMap;
    PlaceAutocompleteFragment placeAutoComplete;

    LatLng myLat;
    Place placey;
    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_autocompleteplaces);

        getSupportActionBar().setTitle("Search about a Place");

        placeAutoComplete = (PlaceAutocompleteFragment) getFragmentManager().findFragmentById(R.id.place_autocomplete);
        placeAutoComplete.setOnPlaceSelectedListener(newPlaceSelectionListener() {
            @OverridepublicvoidonPlaceSelected(Place place) {
                addMarker(place);
            }

            @OverridepublicvoidonError(Status status) {
                Log.d("Maps", "An error occurred: " + status);
            }
        });

        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.mapplaces);
        mapFragment.getMapAsync(this);
    }

    @OverridepublicvoidonMapReady(GoogleMap googleMap) {
        mMap = googleMap;
    }

    publicvoidaddMarker(Place p){

        MarkerOptions markerOptions = newMarkerOptions();

        markerOptions.position(p.getLatLng());
        markerOptions.title(p.getName()+"");
        markerOptions.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE));

        mMap.addMarker(markerOptions);
        mMap.moveCamera(CameraUpdateFactory.newLatLng(p.getLatLng()));
        mMap.animateCamera(CameraUpdateFactory.zoomTo(13));
    }
}

Post a Comment for "Autocomplete Search Bar In Google Maps"