Adding custom image in Google Maps Marker is very useful when you want to show the location pin on Google Maps in a different style. It is possible to use image or icon or bitmap as Google Maps Marker Icon, even you can customize it by creating a layout for the custom marker. If you want to play with Google Map Marker then this complete guide is for you.
I assume that you already know How to implement Google Maps. If you want to know how to implement Google Maps on your project then I will recommend you to first read How to Implement Google Maps
Understanding MarkerOptions Object
Well, MarkerOptions is a class which provides all the possible functionality for creating Google Map Marker of any type I mentioned above in a list. There are numbers of useful methods in MarkreOptions class which will help us to create a marker on Google Map, have a look some useful and important methods of MarkerOptions class.
Adding custom image in Google Maps Marker
Implementing Bitmap as a Google maps pin is similar as described above, in the following code snippet, I am taking an image from the drawable resources and converting it into Bitmap. Sometimes we get Bitmap instead of the image so we can use that Bitmap as a marker.
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
//When Map Loads Successfully
mMap.setOnMapLoadedCallback(new GoogleMap.OnMapLoadedCallback() {
@Override
public void onMapLoaded() {
LatLng customMarkerLocationOne = new LatLng(28.583911, 77.319116);
LatLng customMarkerLocationTwo = new LatLng(28.583078, 77.313744);
LatLng customMarkerLocationThree = new LatLng(28.580903, 77.317408);
LatLng customMarkerLocationFour = new LatLng(28.580108, 77.315271);
//LatLngBound will cover all your marker on Google Maps
LatLngBounds.Builder builder = new LatLngBounds.Builder();
builder.include(customMarkerLocationOne); //Taking Point A (First LatLng)
builder.include(customMarkerLocationThree); //Taking Point B (Second LatLng)
LatLngBounds bounds = builder.build();
CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, 200);
mMap.moveCamera(cu);
mMap.animateCamera(CameraUpdateFactory.zoomTo(14), 2000, null);
}
});
}
Custom image in google maps marker steps
This part is my favorite, you know can create custom marker Yes just first create a layout for the custom marker in layout XML file and then convert the layout into a bitmap, used BitmapDescriptorFactory.fromBitmap() method and pass the created bitmap from the layout. Let’s create it step by step.
Step 1) Create a custom layout for marker
Create an XML file in layout folder and name it custom_marker_layout.xml and paste the following code. I used three things here.
important: Please download the Source code in order to use above three things also don’t forget to add circular image library
compile 'de.hdodenhof:circleimageview:2.1.0'
<?xml version="1.0" encoding="utf-8"?>
Step 2) Writing a createCustomMarker Method
We will create a method that will convert our custom marker layout into Bitmap and BitmapDescriptorFactory.fromBitmap() method will use converted bitmap to create the custom marker for us.
public static Bitmap createCustomMarker(Context context, @DrawableRes int resource, String _name) {
View marker = ((LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.custom_marker_layout, null);
CircleImageView markerImage = (CircleImageView) marker.findViewById(R.id.user_dp);
markerImage.setImageResource(resource);
TextView txt_name = (TextView)marker.findViewById(R.id.name);
txt_name.setText(_name);
DisplayMetrics displayMetrics = new DisplayMetrics();
((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
marker.setLayoutParams(new ViewGroup.LayoutParams(52, ViewGroup.LayoutParams.WRAP_CONTENT));
marker.measure(displayMetrics.widthPixels, displayMetrics.heightPixels);
marker.layout(0, 0, displayMetrics.widthPixels, displayMetrics.heightPixels);
marker.buildDrawingCache();
Bitmap bitmap = Bitmap.createBitmap(marker.getMeasuredWidth(), marker.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
marker.draw(canvas);
return bitmap;
}
Step 3) Plotting Customize Marker on Google Maps
Now its time to plot customize marker on Map, Paste the following code in your onMapReady()function and run the app, but let me explain why creating custom marker is awesome, if you look the following code closely, you will see that i just created a function name createCustomMarker() and expecting an Image and Name as parameter so we can able to change image and text of every marker we want
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
//When Map Loads Successfully
mMap.setOnMapLoadedCallback(new GoogleMap.OnMapLoadedCallback() {
@Override
public void onMapLoaded() {
LatLng customMarkerLocationOne = new LatLng(28.583911, 77.319116);
LatLng customMarkerLocationTwo = new LatLng(28.583078, 77.313744);
LatLng customMarkerLocationThree = new LatLng(28.580903, 77.317408);
LatLng customMarkerLocationFour = new LatLng(28.580108, 77.315271);
mMap.addMarker(new MarkerOptions().position(customMarkerLocationOne).
icon(BitmapDescriptorFactory.fromBitmap(
createCustomMarker(MainActivity.this,R.drawable.manish,"Manish")))).setTitle("Pragmaapps Solutions Pvt Lmt");
mMap.addMarker(new MarkerOptions().position(customMarkerLocationTwo).
icon(BitmapDescriptorFactory.fromBitmap(
createCustomMarker(MainActivity.this,R.drawable.man,"Narender")))).setTitle("Hotel Nirulas Noida");
mMap.addMarker(new MarkerOptions().position(customMarkerLocationThree).
icon(BitmapDescriptorFactory.fromBitmap(
createCustomMarker(MainActivity.this,R.drawable.girl_one,"Neha")))).setTitle("Acha Khao Acha Khilao");
mMap.addMarker(new MarkerOptions().position(customMarkerLocationFour).
icon(BitmapDescriptorFactory.fromBitmap(
createCustomMarker(MainActivity.this,R.drawable.girl_two,"Nupur")))).setTitle("Subway Sector 16 Noida");
//LatLngBound will cover all your marker on Google Maps
LatLngBounds.Builder builder = new LatLngBounds.Builder();
builder.include(customMarkerLocationOne); //Taking Point A (First LatLng)
builder.include(customMarkerLocationThree); //Taking Point B (Second LatLng)
LatLngBounds bounds = builder.build();
CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, 200);
mMap.moveCamera(cu);
mMap.animateCamera(CameraUpdateFactory.zoomTo(14), 2000, null);
}
});
}
Conclusion
If you want to implement Custom image in google maps marker in android then you will find these steps easier. Implementation of custom image markers has very easy steps as described above. You can edit the XML and activity files in your own way to make it more attractive as per your requirements.
References
- Maps SDK: With the Maps SDK for Android, you can add maps based on Google Maps data to your application.
- Map Markers: Markers indicate single locations on the map.
