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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

<?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.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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.