Android Google Map In Fragment Example | Map Inside Fragment

This post is about Android google map in fragment example.

We will implement a google map inside a fragment using supportmapfragment class.

Integration of google map inside fragment is little different than the integration in android activity.

Prerequisite

First of all, we need to create a project in the google developer console to have a map in our fragment.

You will also have a Google API key, which is required in this project. So go through above link first and then come back with your Google API key.

Step 1. Adding dependencies

We will add google dependencies to use some classes related to google map.

For this, add the below line in your build.gradle(Module: app) file.

Step 2. Manifest Changes

Add below source code in AndroidManifest.xml file right after <application> tag.

In the above code, you need to write your google API key in the second line.

After </application> tag, add below code

Whole source code for  AndroidManifest.xml file will look like below

Step 3. Image

In this google map, we will add one icon to the marker.

For this icon, add one image in the res->drawable directory.

You can download sample image by clicking the below link.

Step 4. Making Fragments

We will use two fragments in this example. One is for sample and another will contain google map.

Make a new fragment and give it a name “OneFragmnent

Copy and paste the following code in fragment_one.xml file

Create another fragment named “MapFragment”

Add the following coding lines in fragment_map.xml file

  • I have just added one fragment tag. It is representing the layout of the google map.

Consider below line in <fragment> tag.

  • Above line will convert the simple fragment into the google map fragment.

Write down the below coding lines in MapFragment.java file

Clarification of above code

Read the below line

  • I have created an object of SupportMapFragment class.
  • If you are working in activity instead of fragment, you should use the object of the MapFragment class instead of SupportMapFragment class.
  • Now we will start the map using the object mapFragment.

Below source code will create the map and it’s markers.

Consider the following lines

  • First line will set the type of the map.
  • Second will clear all the previous markers and will clean the map.

Following code will set the camera position.

  • You can set the various properties like target. You need to pass latitude and longitude of the place to set the target.
  • Then set the zoom, bearing, tilt etc. build() method will finally set up the map.

We are setting different markers with following code

  • .position property defines the place of the marker using the latitude and longitude.
  • .title property defines the title of the marker.
  • .icon property will set the custom image as an icon of the marker.
  • .snippet property contain some additional information about the marker.
  • In .icon property, I have used bitmapDescriptorFromVector() method.

Source code for bitmapDescriptorFromVector() method is as below

This method creates a bitmap descriptor from the given image.

Step 5. Final Codes

Last but not least, add some codes in activity_main.xml and MainActivity.java file

Write the below code in activity_main.xml

  • I have taken two buttons and one linearlayout which will be our frame layout.
  • LinearLayout whose id is container_frame_back is our frame and we will load our both fragments in this frame.

Now code for MainActivity.java is as follwing

Describing above snippet

Button click methods are as below

  • When the user clicks the first button, OneFragment will be loaded in the frame.
  • Second button will open the Map Fragment.

addFragment() method’s code is as below

  • This fragment will open the new fragment which it receives via it’s first parameter.
  • Second parameter will decide whether to add a fragment in back stack or not.

For more information about back stack, read fragment backstack management tutorial.

So it was all the word regarding android google map in fragment example.

Do not hesitate to use comment section for any query or for your valuable reviews!

Thanks and good luck!

Familiar Examples

Visit tutorials on Google Map

Look of Google Map In Fragment

Download Source Code For Android Google Map In Fragment

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *