Vasily Kabunov
Vasily Kabunov

Reputation: 6761

Android Google map's marker isn't centered

My layout looks like:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar">
    </include>

    <AutoCompleteTextView
        android:id="@+id/edit_location_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/edit_location_input_hint"/>

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

</LinearLayout>

So I use AutoCompleteTextView at the top of the screen and the map below.

The activity code:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_edit_location);
    ...
    SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
            .findFragmentById(R.id.map);
    mapFragment.getMapAsync(this);
}

@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;

    mMap.getUiSettings().setZoomControlsEnabled(true);

    LatLng point = new LatLng(mService.getLocation().getLatitude(), mService.getLocation().getLongitude());
    mMap.addMarker(new MarkerOptions().position(point).title(mService.getName()));
    mMap.moveCamera(CameraUpdateFactory.newLatLng(point));
    mMap.animateCamera(CameraUpdateFactory.zoomTo(16));
}

For now everything works as expected and the marker shown at the center of the map.

But when I add extra TextView (see below view with id edit_location_input) below AutoCompleteTextView like this:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar">
    </include>

    <AutoCompleteTextView
        android:id="@+id/edit_location_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/edit_location_input_hint"/>

    <TextView
        android:id="@+id/edit_location_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

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

</LinearLayout>

the marker is shown not at the center of the map (actually I need to zoom and move the map to see the marker). Looks like it located nearby.

When I set fixed width to the TextView

 <TextView
        android:id="@+id/edit_location_result"
        android:layout_width="match_parent"
        android:layout_height="40dp"/>

marker appears in the center as expected.

Why does some views affect the map and how to fix it?

Upvotes: 1

Views: 978

Answers (1)

antonio
antonio

Reputation: 18242

The problem is not on your layout but in the camera movements/animations that you are doing to center your marker.

Doing

mMap.moveCamera(CameraUpdateFactory.newLatLng(point));
mMap.animateCamera(CameraUpdateFactory.zoomTo(16));

the map will try to move the camera to your point and animate it to zoom 6 but these two events can overlap resulting in a zoom to level 16 in an undesired map zone.

To solve the problem the easiest solution is updating the camera in only one movement:

mMap.animateCamera(CameraUpdateFactory.newLatLngZoom(point, 16));

If you still need to move the camera and then animate it, you can use the CameraUpdateAnimator from MapUtils (a project of mine):

CameraUpdateAnimator animator = new CameraUpdateAnimator(mMap, null);

animator.add(CameraUpdateFactory.newLatLng(point), false, 100);
animator.add(CameraUpdateFactory.zoomTo(16), true, 1000);

animator.execute();

Upvotes: 1

Related Questions