Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps Android API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps Android API
  3. Buat kunci yang sesuai
Lanjutkan

Marker

Marker menunjukkan lokasi tunggal pada peta. Anda bisa menyesuaikan marker dengan mengubah warna default, atau mengganti ikon marker dengan gambar khusus. Jendela info bisa memberikan konteks tambahan pada marker.

Contoh kode

Repositori ApiDemos di GitHub menyertakan contoh yang memperagakan berbagai fitur marker:

Pengantar

Marker mengidentifikasi lokasi pada peta. Marker default menggunakan ikon standar, untuk semua tampilan dan cara kerja Google Maps. Bisa juga mengubah warna ikon, gambar atau titik jangkar melalui API. Marker adalah objek bertipe Marker, dan ditambahkan ke peta dengan metode GoogleMap.addMarker(markerOptions).

Marker didesain agar interaktif. Marker menerima kejadian click secara default, dan sering digunakan bersama event listener untuk memunculkan jendela informasi. Menetapkan properti draggable marker ke true akan memungkinkan pengguna mengubah posisi marker. Gunakan penekanan lama untuk mengaktifkan kemampuan menggerakkan marker.

Secara default, bila pengguna mengetuk marker, toolbar peta akan muncul di kanan bawah peta, membuat pengguna bisa mengakses aplikasi seluler Google Maps dengan cepat. Anda bisa menonaktifkan toolbar ini. Untuk informasi selengkapnya, lihat panduan untuk mengontrol.

Memulai penggunaan marker

Episode Maps Live ini membahas dasar-dasar penambahan marker ke peta Anda menggunakan Google Maps Android API.

Menambahkan marker

Contoh berikut memperagakan cara menambahkan marker ke peta. Marker ini dibuat pada koordinat 10,10, dan menampilkan string 'Hello world' dalam sebuah jendela info bila diklik.

@Override
public void onMapReady(GoogleMap map) {
    map.addMarker(new MarkerOptions()
        .position(new LatLng(10, 10))
        .title("Hello world"));
}

Menampilkan informasi tambahan tentang marker

Persyaratan umumnya adalah menampilkan informasi tambahan tentang tempat atau lokasi saat pengguna mengetuk marker pada peta. Lihat panduan tentang jendela info.

Mengaitkan data dengan marker

Anda bisa menyimpan objek data arbitrer dengan marker menggunakan Marker.setTag(), dan mengambil objek data menggunakan Marker.getTag(), seperti yang ditampilkan di contoh kode ini:

/**
 * A demo class that stores and retrieves data objects with each marker.
 */
public class MarkerDemoActivity extends FragmentActivity implements
        OnMarkerClickListener,
        OnMapReadyCallback {

    private static final LatLng PERTH = new LatLng(-31.952854, 115.857342);
    private static final LatLng SYDNEY = new LatLng(-33.87365, 151.20689);
    private static final LatLng BRISBANE = new LatLng(-27.47093, 153.0235);

    private Marker mPerth;
    private Marker mSydney;
    private Marker mBrisbane;

    private GoogleMap mMap;

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

        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /** Called when the map is ready. */
    @Override
    public void onMapReady(GoogleMap map) {
        mMap = map;

        // Add some markers to the map, and add a data object to each marker.
        mPerth = mMap.addMarker(new MarkerOptions()
                .position(PERTH)
                .title("Perth");
        mPerth.setTag(0);

        mSydney = mMap.addMarker(new MarkerOptions()
                .position(SYDNEY)
                .title("Sydney");
        mSydney.setTag(0);

        mBrisbane = mMap.addMarker(new MarkerOptions()
                .position(BRISBANE)
                .title("Brisbane");
        mBrisbane.setTag(0);

        // Set a listener for marker click.
        mMap.setOnMarkerClickListener(this);
    }

    /** Called when the user clicks a marker. */
    @Override
    public boolean onMarkerClick(final Marker marker) {

        // Retrieve the data from the marker.
        Integer clickCount = (Integer) marker.getTag();

        // Check if a click count was set, then display the click count.
        if (clickCount != null) {
            clickCount = clickCount + 1;
            marker.setTag(clickCount);
            Toast.makeText(this,
                           marker.getTitle() +
                           " has been clicked " + clickCount + " times.",
                           Toast.LENGTH_SHORT).show();
        }

        // Return false to indicate that we have not consumed the event and that we wish
        // for the default behavior to occur (which is for the camera to move such that the
        // marker is centered and for the marker's info window to open, if it has one).
        return false;
    }
}

Berikut ini adalah beberapa contoh skenario kapan saat yang tepat untuk menyimpan dan mengambil data dengan marker:

  • Aplikasi Anda dapat melayani berbagai tipe marker, dan sebaiknya perlakukan marker secara berbeda saat pengguna mengekliknya. Untuk melakukan ini, Anda bisa menyimpan String dengan marker yang menunjukkan tipenya.
  • Anda mungkin berhadapan dengan sistem yang memiliki pengidentifikasi catatan yang unik, di mana marker merepresentasikan catatan khusus di sistem tersebut.
  • Data marker dapat menunjukkan prioritas yang akan digunakan saat memutuskan indeks-z sebuah marker.

Membuat marker bisa diseret

Anda bisa menempatkan ulang marker setelah ditambahkan ke peta asalkan properti draggable disetel ke true. Tekan lama pada marker untuk mengaktifkan penyeretan. Saat Anda melepaskan jari dari layar, marker akan tetap berada di posisi itu.

Secara default, marker tidak bisa diseret. Anda harus secara eksplisit menyetel marker agar bisa diseret dengan MarkerOptions.draggable(boolean) sebelum menambahkannya ke peta, atau dengan Marker.setDraggable(boolean) setelah marker ditambahkan ke peta. Anda bisa memantau kejadian seret pada marker, seperti dijelaskan dalam Kejadian penyeretan marker.

Cuplikan di bawah ini menambahkan marker yang bisa diseret di Perth, Australia.

static final LatLng PERTH = new LatLng(-31.90, 115.86);
Marker perth = mMap.addMarker(new MarkerOptions()
                          .position(PERTH)
                          .draggable(true));

Menyesuaikan marker

Video ini menampilkan cara menggunakan marker untuk memvisualisasikan lokasi pada peta.

Marker bisa mendefinisikan gambar khusus untuk ditampilkan menggantikan ikon default. Mendefinisikan sebuah ikon melibatkan setelan sejumlah properti yang menentukan perilaku visual marker.

Marker mendukung penyesuaian melalui properti berikut:

Position (Diperlukan)
Nilai LatLng untuk posisi marker pada peta. Inilah satu-satunya properti yang diperlukan untuk objek Marker.
Anchor
Titik pada gambar yang akan ditempatkan di posisi LatLng marker. Default-nya adalah bagian tengah bawah gambar.
Alpha
Menyetel opasitas marker. Default-nya adalah 1.0.
Title
String yang ditampilkan dalam jendela info bila pengguna mengetuk marker.
Snippet
Teks tambahan yang ditampilkan di bawah judul.
Icon
Bitmap yang ditampilkan untuk menggantikan gambar default marker.
Draggable
Setel ke true jika Anda ingin agar pengguna bisa memindahkan marker. Default-nya adalah false.
Visible
Setel ke false agar marker tidak terlihat. Default-nya adalah true.
Orientasi Flat atau Billboard
Secara default, marker berorientasi pada layar, dan tidak akan berputar atau miring bersama kamera. Marker datar berorientasi pada permukaan bumi, serta akan berputar dan miring bersama kamera. Kedua tipe marker tidak akan mengubah ukuran berdasarkan zoom. Gunakan GroundOverlays jika Anda menginginkan efek ini.
Rotation
Orientasi marker, ditetapkan dalam derajat, searah jarum jam. Posisi default berubah jika marker datar. Posisi default untuk marker datar adalah sejajar dengan utara. Bila marker tidak datar, posisi default adalah mengarah ke atas dan rotasi diatur sedemikian sehingga marker selalu menghadap kamera.

Cuplikan di bawah ini membuat marker sederhana, dengan ikon default.

static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
Marker melbourne = mMap.addMarker(new MarkerOptions()
                          .position(MELBOURNE));

Menyesuaikan warna marker

Warna gambar marker default bisa disesuaikan dengan meneruskan objek BitmapDescriptor ke metode icon(). Anda bisa menggunakan satu set warna siap-pakai dalam objek BitmapDescriptorFactory, atau menyetel warna marker khusus dengan metode BitmapDescriptorFactory.defaultMarker(float hue). Hue adalah nilai antara 0 dan 360, yang menyatakan titik-titik pada roda warna.

static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
Marker melbourne = mMap.addMarker(new MarkerOptions()
                          .position(MELBOURNE)
                          .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));

Menyesuaikan opasitas marker

Anda bisa mengontrol opasitas marker dengan metode MarkerOptions.alpha(). Alpha harus ditetapkan sebagai float antara 0,0 dan 1,0, dalam hal ini 0 adalah sepenuhnya transparan dan 1 adalah sepenuhnya tidak tembus pandang.

static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
Marker melbourne = mMap.addMarker(new MarkerOptions()
                          .position(MELBOURNE)
                          .alpha(0.7f));

Menyesuaikan gambar marker

Anda bisa mengganti gambar marker default dengan gambar marker khusus, yang sering kali disebut sebagai ikon. Ikon khusus selalu disetel sebagai BitmapDescriptor, dan didefinisikan menggunakan salah satu metode dalam kelas BitmapDescriptorFactory.

fromAsset(String assetName)
Membuat marker khusus menggunakan nama gambar Bitmap di direktori aset
fromBitmap(Bitmap image)
Membuat marker khusus dari gambar Bitmap.
fromFile(String fileName)
Membuat ikon khusus menggunakan nama file gambar Bitmap yang berlokasi di penyimpanan internal.
fromPath(String absolutePath)
Membuat marker khusus dari jalur file absolut gambar Bitmap.
fromResource(int resourceId)
Membuat marker khusus menggunakan ID sumber daya gambar Bitmap.

Cuplikan di bawah ini membuat marker dengan ikon khusus.

  private static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
  private Marker melbourne = mMap.addMarker(new MarkerOptions()
                            .position(MELBOURNE)
                            .title("Melbourne")
                            .snippet("Population: 4,137,400")
                            .icon(BitmapDescriptorFactory.fromResource(R.drawable.arrow)));

Mendatarkan marker

Ikon marker biasanya digambar menyesuaikan dengan layar; memutar, memiringkan atau melakukan zooming pada peta tidak akan mengubah orientasi marker. Anda bisa menyetel orientasi marker agar datar terhadap bumi. Marker yang diorientasikan dengan cara ini akan berputar bila peta diputar, dan mengubah perspektif bila peta dimiringkan. Marker datar akan mempertahankan ukurannya bila peta diperbesar atau diperkecil.

Untuk mengubah orientasi marker, setel properti flat marker ke true.

static final LatLng PERTH = new LatLng(-31.90, 115.86);
Marker perth = mMap.addMarker(new MarkerOptions()
                          .position(PERTH)
                          .flat(true));

Memutar marker

Anda bisa memutar marker di seputar titik jangkar dengan metode Marker.setRotation(). Rotasi diukur dalam derajat searah jarum jam dari posisi default. Bila marker datar pada peta, maka posisi default adalah Utara. Jika marker tidak datar, posisi default adalah mengarah ke atas dan rotasi diatur sedemikian sehingga marker selalu menghadap kamera.

Contoh di bawah ini memutar marker 90°. Menyetel titik jangkar ke 0.5,0.5 menyebabkan marker diputar di pusatnya, bukannya di dasarnya.

static final LatLng PERTH = new LatLng(-31.90, 115.86);
Marker perth = mMap.addMarker(new MarkerOptions()
                          .position(PERTH)
                          .anchor(0.5,0.5)
                          .rotation(90.0));

Marker indeks-z

Indeks-z menetapkan urutan tumpukan marker ini, relatif terhadap marker lainnya pada peta. Marker dengan indeks-z tinggi digambar di atas marker dengan indeks-z yang lebih rendah. Nilai indeks-z default adalah 0.

Setel indeks-z di objek opsi marker dengan memanggil MarkerOptions.zIndex(), seperti yang ditampilkan di cuplikan kode berikut:

@Override
public void onMapReady(GoogleMap map) {
    map.addMarker(new MarkerOptions()
        .position(new LatLng(10, 10))
        .title("Marker z1")
        .zIndex(1.0f));
}

Anda bisa mengakses indeks-z marker dengan memanggil Marker.getZIndex(), dan Anda bisa mengubahnya dengan memanggil Marker.setZIndex().

Marker selalu digambar di atas layer petak dan overlay non-marker lainnya (overlay bumi, polyline, poligon, dan bentuk lainnya), apa pun indeks-z overlay lainnya. Marker secara efektif dianggap sebagai grup indeks-z terpisah dibandingkan dengan overlay lainnya.

Baca tentang dampak indeks-z pada kejadian klik di bawah ini.

Menangani kejadian marker

Maps API memungkinkan Anda memantau dan merespons kejadian marker. Untuk memantau kejadian ini, Anda harus menyetel listener terkait pada objek GoogleMap tempat marker berada. Bila terjadi kejadian pada salah satu marker dalam peta, callback listener akan dipanggil bersama objek Marker terkait yang diteruskan melalui sebuah parameter. Untuk membandingkan objek Marker ini dengan referensi Anda sendiri ke objek Marker, Anda harus menggunakan equals() dan bukan ==.

Anda bisa memantau kejadian berikut:

Kejadian klik marker

Anda bisa menggunakan OnMarkerClickListener untuk memantau kejadian klik pada marker. Untuk menyetel listener ini pada peta, panggil GoogleMap.setOnMarkerClickListener(OnMarkerClickListener). Ketika pengguna mengeklik marker, onMarkerClick(Marker) akan dipanggil dan marker akan diteruskan sebagai sebuah argumen. Metode ini mengembalikan boolean yang menunjukkan apakah Anda telah menggunakan kejadian ini atau tidak (yaitu, Anda ingin menyembunyikan perilaku default). Jika yang dikembalikan adalah false, maka perilaku default akan terjadi di samping perilaku khusus. Perilaku default untuk kejadian klik marker adalah untuk menampilkan jendela info (jika ada) dan menggerakkan kamera sedemikian rupa sehingga marker berada di tengah-tengah peta.

Dampak indeks-z pada kejadian klik:

  • Saat pengguna mengeklik cluster marker, kejadian klik dipicu untuk marker dengan indeks-z yang tertinggi.
  • Paling banyak satu kejadian dipicu per klik. Dengan kata lain, klik tidak diturunkan ke marker atau overlay lainnya dengan nilai indeks-z yang lebih rendah.
  • Mengeklik cluster marker menyebabkan klik selanjutnya berpindah-pindah pada cluster, yang memilih setiap marker sesuai gilirannya. Urutan siklus memprioritaskan indeks-z pertama, lalu jarak ke titik klik.
  • Jika pengguna mengeklik di luar jarak cluster, API menghitung ulang cluster dan menyetel ulang status siklus klik sehingga dimulai dari awal.
  • Kejadian klik melalui cluster marker ke bentuk dan overlay lainnya sebelum memulai ulang siklus.
  • Marker secara efektif dianggap sebagai grup indeks-z terpisah dibandingkan dengan overlay atau bentuk (polyline, poligon, lingkaran, dan/atau overlay bumi) lainnya, apa pun indeks-z lainnya. Jika beberapa marker, overlay, atau bentuk dihamparkan di atas satu sama lainnya, kejadian klik diulang pada cluster marker terlebih dulu, lalu dipicu untuk overlay atau bentuk yang bisa diklik lainnya berdasarkan nilai indeks-z-nya.

Kejadian penyeretan marker

Anda bisa menggunakan OnMarkerDragListener untuk memantau kejadian penyeretan pada marker. Untuk menyetel listener ini pada peta, panggil GoogleMap.setOnMarkerDragListener. Untuk menyeret marker, pengguna harus menekan lama pada marker. Saat pengguna mengangkat jarinya dari layar, marker akan tetap berada di posisi itu. Bila marker diseret, onMarkerDragStart(Marker) akan dipanggil lebih dahulu. Saat marker diseret, onMarkerDrag(Marker) akan dipanggil secara konstan. Di akhir penyeretan, onMarkerDragEnd(Marker) akan dipanggil. Anda bisa mendapatkan posisi marker kapan saja dengan memanggil Marker.getPosition().

Catatan: Secara default, marker tidak bisa diseret. Marker harus disetel secara eksplisit agar bisa diseret sebelum bisa diseret oleh pengguna. Ini bisa dilakukan dengan MarkerOptions.draggable(boolean) sebelum menambahkannya ke peta, atau Marker.setDraggable(boolean) setelah menambahkannya ke peta.

Kirim masukan tentang...

Google Maps Android API
Google Maps Android API
Butuh bantuan? Kunjungi halaman dukungan kami.