Android Google Maps v2 with custom marker

Home > Android Google Maps v2 with custom marker

Dheerendra Singh Android 25th April, 2017

This tutorial explain how to implement custom marker on Google Maps v2 in android application.

Download Code

1. Setup on Goggle Developer Console

1. Go to Goggle Developer Console https://console.developers.google.com/

After you gain access to the console you can start by creating your New project. I choose project name "googlemap"

2. After created project enable Google Maps Android API

Click on Google Maps Android API for enable api

Click on Enable button After successfuly enabled

3. Go to Credentials left hand side menu and create API Key

Press on create credential blue button & select API Key after that API key created dialog show press close button in this dialog.

4. After successfully created API Key add android application Package name (I choose package name com.androidlearningtutorials.googlemap) & SHA1

Check tutorial how to find SHA1 in Andriod Studio SHA1

Click on API Key 1

In Key restriction by default selected is None choose Android apps & Add package name and fingerprint

After added Add package name and fingerprint press on save button.

After successfully copy key & save on note pad these key use in android application.

2. Creating Android Project

1. Create a new project in Android Studio from File ? New Project and fill the project details.

2. Open build.gradle add Google Play Services 'com.google.android.gms:play-services:8.4.0' after adding click on Sync Now

									
apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"

    defaultConfig {
        applicationId "com.androidlearningtutorials.googlemap"
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        multiDexEnabled true
    }
    android {
        packagingOptions {
            exclude 'META-INF/DEPENDENCIES'
            exclude 'META-INF/NOTICE'
            exclude 'META-INF/LICENSE'
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:25.2.0'

    compile 'com.google.android.gms:play-services:8.4.0'
}

3. Add the below permissions to AndroidManifest.xml file.

									
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidlearningtutorials.googlemap">

    <!-- need permission for google map -->
    <permission
        android:name="com.androidlearningtutorials.googlemap.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />
    <uses-library android:name="com.google.android.maps" />

    <uses-permission
        android:name="com.androidlearningtutorials.googlemap.permission.MAPS_RECEIVE" />

    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <meta-data android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />

        <!-- paste create google API Key -->
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="AIzaSyD3S4jr6i1PSRR0N1e6ywdga75LXlCzbOg"/>

    </application>

</manifest>

4. Now open activity_main.xml add MapFragment like as below.

									
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</RelativeLayout>

5. Now create a custom_marker.xml add below code.

									
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="5dip"
        android:paddingLeft="10dip"
        android:paddingRight="20dip"
        android:paddingBottom="25dip"
        android:background="@drawable/custom_info_bubble">
        <ImageView
            android:id="@+id/clientPic"
            android:layout_width="60dip"
            android:layout_height="60dip"
            android:src="@drawable/android"
            android:layout_marginLeft="8dip"
            android:layout_gravity="center_vertical"
            android:layout_centerVertical="true"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginLeft="2dip">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="25dip"
                    android:layout_height="25dip"
                    android:layout_marginLeft="5dip"
                    android:background="@drawable/ic_company"/>
                <TextView
                    android:id="@+id/nameTxt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Amixx XX Soluxxxxx"
                    android:textSize="10dip"
                    android:gravity="center_vertical"
                    android:textColor="#000000"/>

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="25dip"
                    android:layout_height="25dip"
                    android:layout_marginLeft="5dip"
                    android:background="@drawable/ic_call"/>
                <TextView
                    android:id="@+id/mobileTxt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="+91-98XXXXX200"
                    android:textSize="10dip"
                    android:gravity="center_vertical"
                    android:textColor="#000000"/>

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="25dip"
                    android:layout_height="25dip"
                    android:layout_marginLeft="5dip"
                    android:background="@drawable/ic_email"/>
                <TextView
                    android:id="@+id/addressTxt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="android@gmail.com"
                    android:textSize="10dip"
                    android:gravity="center_vertical"
                    android:textColor="#000000"/>

            </LinearLayout>

        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

5. Now open MainActivity.java and add the below code.

								
package com.androidlearningtutorials.googlemap;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.RelativeLayout;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;

public class MainActivity extends AppCompatActivity {

    SupportMapFragment fm;
    GoogleMap googleMap;

    static final LatLng latlng = new LatLng(28.5355, 77.3910);

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fm = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
        googleMap = fm.getMap();
        googleMap.getUiSettings().setZoomControlsEnabled(false);
        googleMap.getUiSettings().setCompassEnabled(true);
        googleMap.setPadding(0, 0, 0, 100);

        //adding marker on google map
        addMarker();


    }

    private void addMarker() {

        View marker = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.custom_marker, null);
        
        googleMap.addMarker(new MarkerOptions()
                .position(latlng)
                .icon(BitmapDescriptorFactory.fromBitmap(createDrawableFromView(this, marker))));
        googleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(latlng, 15));


    }

    // Convert a view to bitmap
    public static Bitmap createDrawableFromView(Context context, View view) {
        DisplayMetrics displayMetrics = new DisplayMetrics();
        ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        view.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT));
        view.measure(displayMetrics.widthPixels, displayMetrics.heightPixels);
        view.layout(0, 0, displayMetrics.widthPixels, displayMetrics.heightPixels);
        view.buildDrawingCache();
        Bitmap bitmap = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(bitmap);
        view.draw(canvas);

        return bitmap;
    }
}

5. Run your application Output as below.

Dheerendra Singh

Dheerendra Singh is a Mobile Developer(Android) & Web Developer(PHP) of Amisun IT Solutions, Master degree in Computer Science.