Tutorial Membuat InfoWindow Marker pada Peta Google Maps Android

Pada postingan kali ini, saya ingin sharing tutorial membuat infowindow pada marker yang akan kita buat di Google Maps. Infowindow berisi informasi berupa title, snippet, gambar, dan titik koordinat suatu marker. 

Pada layout activity_main.xml ubah kode menjadi seperti di bawah ini.
activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.MapFragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

Pada MainActivity.java ubahlah koding tersebut menjadi seperti dibawah ini.
MainActivity.java

package com.maps;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.InfoWindowAdapter;
import com.google.android.gms.maps.MapFragment;
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;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {
 GoogleMap gMaps;
 LatLng from;
 double lat1 = 0.510127;
 double lng1 = 101.450015;

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

  initMap();
  from = new LatLng(lat1, lng1);
  gMaps.addMarker(new MarkerOptions().position(from)
    .snippet("Info Window").title("location 1")
    .icon(BitmapDescriptorFactory.fromResource(R.drawable.mark)));

 }

 private void initMap() {
  if (gMaps == null) {
   gMaps = ((MapFragment) getFragmentManager().findFragmentById(
     R.id.map)).getMap();
   if (gMaps != null) {
    gMaps.animateCamera(CameraUpdateFactory.zoomTo(18));
    gMaps.getUiSettings().setCompassEnabled(true);
    gMaps.getUiSettings().setZoomControlsEnabled(true);
    gMaps.getUiSettings().setMyLocationButtonEnabled(true);
    gMaps.setMyLocationEnabled(false);
    gMaps.setTrafficEnabled(true);
    gMaps.setBuildingsEnabled(true);

   }
  }

 }
}

Pada res/layout, tambahkan layout baru dengan nama infowindow.xml pastekan koding berikut.
infowindow.xml

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="74dp"
        android:layout_height="68dp"
        android:layout_marginTop="2dp"
        android:src="@drawable/ic_launcher" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Title"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Snippet"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Small Text"
            android:textSize="12sp"
            android:textStyle="italic" />
    </LinearLayout>

</LinearLayout>

Eh, hampir lupa saya, pada MainActivity.java tambahkan koding berikut ini pada setInfoWindowAdapter.

gMaps.setInfoWindowAdapter(new InfoWindowAdapter() {

   @Override
   public View getInfoWindow(Marker marker) {
    return null;

   }

   @Override
   public View getInfoContents(Marker marker) {
    View v = getLayoutInflater().inflate(R.layout.infowindow, null);
    TextView titx = (TextView) v.findViewById(R.id.textView1);
    TextView sntx = (TextView) v.findViewById(R.id.textView2);
    TextView sntc = (TextView) v.findViewById(R.id.textView3);
    ImageView img = (ImageView) v.findViewById(R.id.imageView1);
    titx.setText(marker.getTitle());
    sntx.setText(marker.getSnippet());
    sntc.setText(marker.getPosition().latitude + ", "
      + marker.getPosition().longitude);
    img.setImageDrawable(getResources()
      .getDrawable(R.drawable.mark));

    return v;

   }
  });

Jalankan project, maka hasilnya seperti gambar dibawah ini.

 

Demikianlah tutorial membuat infowindow di peta Google maps android, semoga bermanfaat.