Android Google Map Custom Info Window Button Click Example

Android Google Map Custom Info Window Button Click Example is written here.

In this tutorial, I will explain how to create custom info window layout in google map.

Info window is something like a pop up rectangle that gives some information about the marker on google map.

It is mostly useful when you want to provide quick lines about the place. You can also provide an example image of the particular marker or place.

I will teach you how to hide this info window on the button click.

We will also consider how you can implement the button click of the info window on google map in android.

Necessary Thing

Before you start making this example, you need to have google API Key.

This API key is necessary to integrate the google map in your android app.

For generating this API Key, you need to create one app in the Google Developer Console.

You should first read this Google Map API Integration in Android Example Tutorial for this purpose.

This tutorial has mainly two parts :

  1. Work At Google Developer Console (follow this part only)
  2. Work On Android Studio

You should follow all the steps of first part only. After this you will have your Google API Key. Now follow all the below steps to create info window on google map marker.

Step 1. Making New Activity

First of all, create a new project in the android studio.

In this process, you will be asked to choose activity type right after you entered project name, directory and SDK Version.

Following image shows to select default activity.

google map integration in android, android current location on google map, android google map custom marker, android google map custom info window

Select Google Map Activity

  • Here, select Google Maps Activity as your first activity.
  • Selecting Google Maps Activity will automatically enable the google map in your android app.

Step 2. Write API Key At Right Place

After creating project with Maps Activity, you will have one xml file called “google_maps_api.xml”

Compiler automatically creates this file at res->values directory.

Source Code for this file is as the following

As you can see in the above code, last lines holds the <string> </string> tags. Enter your Google API Key between these tags.

Step 3. Lion Image

As I have already said, we will add one image in our info window. So for this purpose, we have to add one image in the drawable folder.

Download a lion image by clicking the below link and copy it in drawable directory.

[sociallocker]Download a lion image[/sociallocker]

Step 4. Custom Layout For Info window

We need create one xml layout file. This file will work as a custom file for info window.

Info window will represent a layout generated by this file. So make a new xml layout file in res->layout directory.

Name of this file should be “gir_forest.xml.”

Add the below coding lines in “gir_forest.xml.”

  • I have added one image view and two text views in the above file.
  • Image view represent the sample image of the place and two text views are providing basic information about the place or marker.

Step 5. Adapter class Info Window

Create a new Java class named “InfoWindowAdapter.java”

Copy the below code in it.

This class provides data to text views. Object of this class will create display view for info window.

Step 6. Changing Default Activity

You have selected Map activity as a default activity in step 1. So you should have two files

First is activity_maps.xml and second one is MapsActivity.java

Write the below Source code in activity_maps.xml

  • One button and one fragment is present in the above code.
  • Compiler will load the google map in the fragment.
  • When the user will click the button, compiler will hide the info window.

Write down the following coding lines in MapsActivity.java

Attending the above code

Now let us one by one see what above code is doing.

  • First read the below code

  • It is the code for button. Info window will be hidden when the user click the button.

See the below code

  • Compiler will start the process to create the google map with the help of the above code.

Following code is run when map is ready to be loaded in the fragment.

  • Compiler will first add the marker in the map.
  • Then it will create an object of the InfoWindowAdapter class. After this, compiler will generate the info window with help of an object of the InfoWindowAdapter class.

Consider the below code

  • Above code will be run when the user click on the Info Window.

Related Map Tutorials

Following are useful tutorials for android google maps.

Output Of Info Window

Download Source Code For Android Google Map Custom Info Window

[sociallocker]Download Source Code For GoogleMap InfoWindow[/sociallocker]

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 *