Replace default Android Maps API v2 Change MyLocation icon

Question

I would like to replace the default icon that Android Maps V2 uses for 'My Location' with my own image. I've created my own tile provider that brings in a few maps which are predominantly blue and as such the default My Location icon, the little blue arrow, is very hard to see.

Previously I would have just overridden the draw method of the MyLocationOverlay, but there doesn't seem to be one in the new API.

I also need the icon to be able to rotate, the same way that the arrow does depending on which way you are facing. So I can't just use a normal marker. Basically I just need to create a custom image for that arrow.

Rinee

Have you checked the demo of the google map v2 in your sdk which have demostrated the functionality of adding the marker with your custom image and rotate it accordingly also. – Mature

Hey Grishu, I did have a look at the examples in the SDK, Which part of the demo app specifically looks at rotating the my location icon? I couldn't seem to find it. – Rinee

In the sdk demo check the class of marker which have shown the way of adding the marker on the map . – Mature

Answer 1

The latest update to Google Play Services now allows you to use 'Flat' Markers and rotate them which is exactly what I needed. Here is a simple version of the way I implemented it. There is probably a fair bit I can do to optimize and tweak the animation, but it does the job for the moment. Any feedback is welcome.

Marker mPositionMarker;
GoogleMap mMap;

@Override
public void onLocationChanged(Location location) {

    if (location == null)
        return;

    if (mPositionMarker == null) {

        mPositionMarker = mMap.addMarker(new MarkerOptions()
                .flat(true)
                .icon(BitmapDescriptorFactory
                        .fromResource(R.drawable.positionIndicator))
                .anchor(0.5f, 0.5f)
                .position(
                        new LatLng(location.getLatitude(), location
                                .getLongitude())));
    }

    animateMarker(mPositionMarker, location); // Helper method for smooth
                                                // animation

    mMap.animateCamera(CameraUpdateFactory.newLatLng(new LatLng(location
            .getLatitude(), location.getLongitude())));

}

public void animateMarker(final Marker marker, final Location location) {
    final Handler handler = new Handler();
    final long start = SystemClock.uptimeMillis();
    final LatLng startLatLng = marker.getPosition();
    final double startRotation = marker.getRotation();
    final long duration = 500;

    final Interpolator interpolator = new LinearInterpolator();

    handler.post(new Runnable() {
        @Override
        public void run() {
            long elapsed = SystemClock.uptimeMillis() - start;
            float t = interpolator.getInterpolation((float) elapsed
                    / duration);

            double lng = t * location.getLongitude() + (1 - t)
                    * startLatLng.longitude;
            double lat = t * location.getLatitude() + (1 - t)
                    * startLatLng.latitude;

            float rotation = (float) (t * location.getBearing() + (1 - t)
                    * startRotation);

            marker.setPosition(new LatLng(lat, lng));
            marker.setRotation(rotation);

            if (t < 1.0) {
                // Post again 16ms later.
                handler.postDelayed(this, 16);
            }
        }
    });
}

Rinee

Does this account for bearing? – Gupton

Why this line giving me Incompatible type error ? final Interpolator interpolator = new LinearInterpolator(); – Summitry

Can confirm this animate method no longer works well. If you want to smooth move the screen however, just use map.animateCamera() instead of map.moveCamera. Right now it's enough for me – Portage

Answer 2

my simple solution way is just disable "my location" of Google map

and create ImageView on Map with my icon then capture ImageView with

onClick and getMyLocation , animateCamera in onClick

 this.mGoogleMap.getUiSettings().setMyLocationButtonEnabled(false);
 this.mGoogleMap.setMyLocationEnabled(true);

.

@Override
public void onClick(final View v) {

    Location location = this.mGoogleMap.getMyLocation();

        if (location != null) {

            LatLng target = new LatLng(location.getLatitude(), location.getLongitude());
            CameraPosition position = this.mGoogleMap.getCameraPosition();

            Builder builder = new CameraPosition.Builder();
            builder.zoom(15);
            builder.target(target);

            this.mGoogleMap.animateCamera(CameraUpdateFactory.newCameraPosition(builder.build()));

          }    
}

Bedouin

Answer 3

As of 3.1.36 you cannot change the icon (I feel it will change in the future, but looking at the speed of API v2 improvements implementation, it won't be before Christmas).

You can however use a marker now, because it has setIcon function.

Basically you have to forget about GoogleMap.setMyLocationEnabled, because it will always appear above. You will instead create your own LocationClient and use lat, long and bearing from Location to update the Marker. Additionally add a Circle and use accuracy to have an effect similar to the default myLocation visualization.

Noonday

greetings from 2019, it never got added to the sdk, but looking at the development speed it's not gonna be ready before my unborn children have a bachelor degree – Cruiserweight

Answer 4

You can not handle click event of MyLocation button on Google map, yeah but there is a trick through which you can get behavior as per your need:
first in your layout.xml file add map and dummy MyLocation button.
You can achieve this with the help of Relative Layout:

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

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

    <Button
        android:id="@+id/myLocationButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/mylocation" />
</RelativeLayout>

You can take "mylocation.png" seems like u see on Google map.
LocationManager locationManager = (LocationManager)getSystemService(LOCATION_SERVICE);

    Criteria criteria = new Criteria();
    String s = locationManager.getBestProvider(criteria, false);

    Location location = locationManager.getLastKnownLocation(s);  

Call click event of your dummy MyLocation button, in which you will add marker
private GoogleMap googleMap; googleMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap(); LatLng latLng = new LatLng(location.getLatitude(), location.getLongitude()); googleMap.addMarker(new MarkerOptions().icon(YOUR_MODIFIED_ICON).position(latLng).title(TITLE).snippet(SNIPET));
In this way you can modify Google map's default icon.
Yeah also you need to set zoom level:
googleMap.moveCamera(CameraUpdateFactory.newLatLng(latLng));

Quemoy

Answer 5

Here is the code to access location button:

View mv=findViewById(R.id.map);
        View locationButton = ((View) mv.findViewById(Integer.parseInt("1")).getParent()).findViewById(Integer.parseInt("2"));
        RelativeLayout.LayoutParams rlp = (RelativeLayout.LayoutParams) locationButton.getLayoutParams();
// position on right bottom
        rlp.addRule(RelativeLayout.ALIGN_PARENT_TOP, 0);
        rlp.addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE);
        rlp.setMargins(0, 180, 180, 0);

Suggestion

Welcome to Stack Overflow! Thank you for this code snippet, which may provide some immediate help. A proper explanation would greatly improve its educational value by showing why this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply. – Fitzgerald

Answer 6

try this; I use this for draw a route on the map, but I set icons for the markers and for my location Declare this for view your location:

    LocationManager locationManager = (LocationManager) 
    getSystemService(LOCATION_SERVICE);
    Criteria criteria = new Criteria();
    String provider = locationManager.getBestProvider(criteria, true);
    Location myLocation= locationManager.getLastKnownLocation(provider);

    longitude = myLocation.getLongitude();
    latitude  = myLocation.getLatitude();
    fromPosition = new LatLng(latitude, longitude);

And create a function like that, I used for draw on the map but I set icons on the markers and my position:

mGoogleMap.clear();
if(response.equalsIgnoreCase("Success"))
{
     ArrayList<LatLng> directionPoint = v2GetRouteDirection.getDirection(document);
     PolylineOptions rectLine = new PolylineOptions().width(7).color(Color.BLUE);

     for (int i = 0; i < directionPoint.size(); i++) {
     rectLine.add(directionPoint.get(i));
     }
     // Adding route on the map
     mGoogleMap.setOnMarkerClickListener(MainActivity.this);
     mGoogleMap.addPolyline(rectLine);
     markerOptions.position(fromPosition);
     markerOptions.draggable(true);
     Marker1 = mGoogleMap.addMarker(new MarkerOptions()
               .position(Estadio)
               .title("Estadio Cuscatlan")
               .snippet("Estadio Cuscatlan")                                                    
               .icon(BitmapDescriptorFactory                                          
               .fromResource(R.drawable.mapmarker))); 
     Marker2 = mGoogleMap.addMarker(new MarkerOptions()
               .position(Metrocentro)
           .title("Metrocentro")
           .snippet("Metrosuelo")
           .icon(BitmapDescriptorFactory
           .fromResource(R.drawable.mapmark
      Marker3 = mGoogleMap.addMarker(new MarkerOptions()
            .position(Mejicanos)
            .title("Mejicanos")
            .snippet("Mejicanos")
            .icon(BitmapDescriptorFactory
            .fromResource(R.drawable.mapmarker)));  
      MarkerMe = mGoogleMap.addMarker(new MarkerOptions()                                             
                        .position(fromPosition) 
                        .icon(BitmapDescriptorFactory
                        .fromResource(R.drawable.car64)));
   }
    Dialog.dismiss();
    } 
} 

Chastitychasuble

can u make title on image .title("Estadio Cuscatlan")=set in image address of title set in image can u make it........ – Salesclerk