Custom Map Marker

Today I want to share my experience about how can a custom map marker be implemented for Google Maps on Android Studio. First of all, there is a library called Google Maps API Utility Library on Github developed by Google Developers that assists you with various utilities such as GeoJSON, KML, heatmaps, marker clusters, encoding and decoding polylines, calculating distances, areas and headings, and custom markers via bubble icons. It makes things easier a lot. Here is the link to download the library: www.github.com/googlemaps/android-maps-utils

I am working on an Android app that uses Google maps. Like Airbnb I want to show some information in certain locations simultaneously in one map:

We need to add this library into our project. Here is how can you do simply:

• First of all, you need to copy the text inside gradle.properties from library you downloaded and paste into gradle.properties in your project. It should prevent error such as “No such property: sonatypeUsername for class: org.gradle.api.internal.project”.
• Secondly, you need to add a dependency into build.gradle to run your code:

dependencies {
compile ‘com.google.maps.android:android-maps-utils:0.5+’
}

• Then, open your project from Android Studio and then File → New → Import Module. You need to enter source directory for which library you want to add, in our case it is android-maps-utils-master. You can select simply library button to import.
• Now it is ready to use!

The second part consists of using Google Maps API Utility Library. In your MapsActivity.java file(assuming you have already created) in addMarker method, we will add markers into our map with additional information showing on the marker with text. To do this, we will use IconGenerator class. It has already implemented a lot of methods with Bitmap to generate custom icon and that makes Google API utility library very useful.

IconGenerator iconGen = new IconGenerator(this);
MarkerOptions markerOptions = new MarkerOptions().
icon(BitmapDescriptorFactory.fromBitmap(iconFactory.makeIcon("Text"))).
    position(new LatLng(lat from database, lon from database)).
    anchor(iconFactory.getAnchorU(), iconFactory.getAnchorV());

Thus, it is ready to customize! It is already showing your text into your locations from database with MarkerOptions. You can do some adjustments for your text also:

iconGen.setTextAppearance(R.style.myStyleText);

With custom xml design in your style file you can simply add:

<style name="myStyleText">
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">@color/textColor</item>
</style>

You can also change the background with setBackground method. You can add your image as a marker:

iconGen.setBackground(getResources().getDrawable(R.drawable.marker_background));

Markers are randomly added from database.

For example;

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
    <gradient
    android:angle="90"
    android:endColor="@color/color1"
    android:startColor="@color/color2" />
    <stroke
    android:width="1dp"  
     android:color="@color/color3" />
</shape>

By creating a drawable xml file like that, you can change more. It is now seems as: