8

Its possible to use a custom view instead of a Marker in Google Maps API v2? It's sad that Google doesn't allow us to customize our markers with views (Relative layout with imageviews, textviews etc) , so its possible to inflate a view and then put that view to a specific position in a map?

WitaloBenicio
  • 3,395
  • 5
  • 25
  • 32
  • 1
    Since they can use Drawables, I'm going to have to ask - `What have you tried?` – Shark Feb 26 '16 at 15:23
  • 1
    I know they can use drawables, but i want to use Views in fact. RelativeLayouts, ImageViews, TextView, etc. – WitaloBenicio Feb 26 '16 at 15:25
  • 2
    What i have gone so far is build my view, transform that view into a bitmap, and set to marker. But this appears to be so wrong to me. hahaha – WitaloBenicio Feb 26 '16 at 15:25
  • +1, clever. Since that's the only way it can work right now, because Markers use Bitmaps. Additionally, consider the use-case of having 20 markers on the screen/map at the same time. With 20 drawables that's not alot. With 20 dialog-like views... I dunno. It may get cluttered on phones. – Shark Feb 26 '16 at 15:29
  • For example, if you see AirBnb app, they seem to use a view on that. You open the map, then you can see the prices in a baloon, and if you select a place in the bottom viewpager, the marker update its view to a highlighted mode. – WitaloBenicio Feb 26 '16 at 15:32
  • Are we sure they're not 'faking' a click on the Marker to open it's context menu? :) Their context menus/dialogs can be Fragments. (from what I see from my code) – Shark Feb 26 '16 at 15:36
  • Did you try to use views above the map (not as marker)? – Oleksandr Feb 26 '16 at 15:50
  • The problem to use views is that if you move the map...the views will not move and we cannot know the lat lng in the map. – WitaloBenicio Feb 26 '16 at 17:00
  • Add listener to map, handle moving event, convert lat/lon to screen pixels and update views position. – Oleksandr Feb 26 '16 at 17:05

2 Answers2

10

You can use IconGenerator to achieve this.

IconGenerator iconGenerator = new IconGenerator(context);
iconGenerator.setBackground(context.getDrawable(R.drawable.bg_custom_marker));
View inflatedView = View.inflate(context, R.layout.marker_custom, null);
iconGenerator.setContentView(inflatedView);
Marker marker = map.addMarker(
        new MarkerOptions()
                .position(new LatLng(-34.397, 150.644))
                .icon(BitmapDescriptorFactory.fromBitmap(iconGenerator.makeIcon())));

Now we need that marker_custom view and bg_custom_marker drawable.

marker_custom.xml

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:backgroundTint="@android:color/white"
    tools:ignore="RtlHardcoded">

    <TextView
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I'm a custom view :)" />

</androidx.constraintlayout.widget.ConstraintLayout>

bg_custom_marker.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#000000" />
    <stroke
        android:width="1dp"
        android:color="#FFFFFF" />
    <corners android:radius="5dp" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</shape>

It looks like the following:

Custom Marker

Edit: iconGenerator.setBackground(null); might be more flexiable.

Yunus Emre
  • 390
  • 3
  • 9
5

Well you can not put view on Google Maps but @WitaloBenicio said you can convert that view to Bitmap and show it on marker

SO : Convert View to bitmap

and using BitmapDescriptorFactory.fromBitmap (Bitmap image) add to marker 

mMap.addMarker(new MarkerOptions()..icon(BitmapDescriptorFactory.fromBitmap(bitmap)));

I strongly prefer go to this library Google Maps Android API Utility Library and check for IconGenerator class Git Repo

Bharatesh
  • 8,943
  • 3
  • 38
  • 67
  • This lib will be usefull. Thanks – WitaloBenicio Mar 04 '16 at 11:52
  • p.s.: im Witalo Benicio. hahahaha – WitaloBenicio Mar 04 '16 at 11:52
  • I wanted to edit this question because of credit to skadoosh for mentioning IconGenerator class. The best way is to show view on Marker using IconGenerator.setContentView() method - http://googlemaps.github.io/android-maps-utils/javadoc/com/google/maps/android/ui/IconGenerator.html#setContentView-View- and then invoke IconGenerator.makeIcon() – BhalchandraSW Apr 14 '17 at 13:03
  • @skadoosh, how to handle click different component of view? – Suman Oct 07 '17 at 15:50
  • @Suman Never tried and I believe you can not, As we are displaying a image over map. – Bharatesh Oct 07 '17 at 15:57
  • if I use custom view where 3 or 4 button, can I handle click event of this buttons? – Suman Oct 07 '17 at 16:00
  • @Sumam not sure about but if you adding those buttons to a single view and the whole is a marker then on marker click listener is called not view click listener. – Bharatesh Oct 07 '17 at 16:07
  • What if view has animation? if we convert each frame to bmp to get animated effect for marker, it is not that much smooth. What is best approach for that? – Usman Rana Jun 21 '18 at 14:57