Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Map Markers with text in Google Maps Android API v2

I have came up with this post but it is for the deprecated Google Maps API

http://tech.truliablog.com/2012/02/23/custom-map-markers-for-android-google-maps/

In the new API, I could not find an easy way to do this. In fact, I could not do it at all.

Basicly I want to have TextViews as a Marker on the map with 9Patch drawable as a background of the text. Trulia is still doing it with the new API v2 in their current app. You can check it here

Trulia current app

How can I do this?

like image 570
tasomaniac Avatar asked Jul 24 '13 14:07

tasomaniac


People also ask

How do I add a marker on Google Maps Android?

For adding a custom marker to Google Maps navigate to the app > res > drawable > Right-Click on it > New > Vector Assets and select the icon which we have to show on your Map. You can change the color according to our requirements. After creating this icon now we will move towards adding this marker to our Map.


5 Answers

Chris Broadfoot created a utility library that does exactly that.

The library is available here: https://github.com/googlemaps/android-maps-utils

Also see this short video: http://www.youtube.com/watch?v=nb2X9IjjZpM

like image 72
MaciejGórski Avatar answered Oct 11 '22 13:10

MaciejGórski


It can be simply achieved using this useful lib provided by google.

IconGenerator icg = new IconGenerator(this);
icg.setColor(Color.GREEN); // green background 
icg.setTextAppearance(R.style.BlackText); // black text 
Bitmap bm = icg.makeIcon("200 mi");

In style.xml

<style name="BlackText" parent="TextDefault">
    <item name="android:textColor">@color/black</item>
</style>

http://googlemaps.github.io/android-maps-utils/javadoc/

http://googlemaps.github.io/android-maps-utils/

https://github.com/googlemaps/android-maps-utils

you can set up upper links in your project from this link

like image 40
Justcurious Avatar answered Oct 11 '22 13:10

Justcurious


As far as I know, this is not currently supported by the google maps api v2. What you can do, on the other hand, is dynamically create the bitmap for your marker, and write the value you want to show in it. Alas, there may easily be performance issues if you happen to have plenty of pins.

Canvas canvas = new Canvas(bitmap);
canvas.drawText("Your text", textXOffset, textYOffset, mPictoPaint);
MarkerOptions options = new MarkerOptions().position([…]).icon(BitmapDescriptorFactory.fromBitmap(bitmapResult));
Marker newMarker = map.addMarker(options);

Note that bitmap needs to be mutable. Also you will have to scale the base image (probably using a 9.patch) to your need.

like image 42
Nerkatel Avatar answered Oct 11 '22 14:10

Nerkatel


I know this question is old but I'll post my answer here in case it helps someone.

None of the above solutions were working for me because

  • I already have custom icons for markers in my app

  • My app display potentially thousands of different marker titles so creating that many images in memory would be a performance problem

  • As the marker icons become bigger, the map becomes very quickly unreadable

  • I wanted the titles to show only if there is room, potentially hiding if not enough room to display

I found no solution on the internet so I rolled up my sleeves and made this library which solves my problem, hopefully it will help others too:

https://github.com/androidseb/android-google-maps-floating-marker-titles

Here is a preview of how it works:

preview

like image 33
androidseb Avatar answered Oct 11 '22 12:10

androidseb


by referring to Google's sample code

IconGenerator iconFactory = new IconGenerator(this);    
        iconFactory.setColor(Color.CYAN);
        addIcon(mMap, iconFactory, "Custom color", new LatLng(-33.9360, 151.2070));

addIcon() Method here:

private void addIcon(GoogleMap googleMap, IconGenerator iconFactory, CharSequence text, LatLng position) {
        MarkerOptions markerOptions = new MarkerOptions().
                icon(BitmapDescriptorFactory.fromBitmap(iconFactory.makeIcon(text))).
                position(position).
                anchor(iconFactory.getAnchorU(), iconFactory.getAnchorV());

        googleMap.addMarker(markerOptions);
    }
like image 43
AbhinayMe Avatar answered Oct 11 '22 12:10

AbhinayMe