Tutorial selanjutnya kita akan belajar menampilkan maps pada projek android. Sebelumnya kita sudah belajar mendapatkan kunci key api google maps. Jadi kali ini kita akan coba kunci itu untuk digunakan pada projek android kita.
Ikuti langkah-langkah berikut ini sampai selesai:
- Sebelumnya kita sudah buat projek baru android studio waktu melakukan pengaturan pembatasan kunci.
- Kemudian dengan projek tersebut kita teruskan saja,
- Pertama yang kita lakukan yaitu install library google maps di build.gradle(Module:app), ketikan seperti berikut pada module app tersebut:
|
1 |
implementation 'com.google.android.gms:play-services-maps:16.1.0' |
- Pada AndroidManifest.xml tambahkan permission:
|
1 2 |
<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> |
- Masih di AndroidManifest.xml, tambahkan kode berikut pada bagian <application>
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> <!-- The API key for Google Maps-based APIs. --> <meta-data android:name="com.google.android.geo.API_KEY" android:value="@string/google_maps_key" /> <uses-library android:name="org.apache.http.legacy" android:required="false" /> |
- Pada strings.xml tambahkan api key anda:
|
1 |
<string name="google_maps_key">KUNCI API KEY ANDA</string> |
- Lalu pada gradle.properties tambahkan juga:
|
1 |
GOOGLE_MAPS_API_KEY=KUNCI API KEY ANDA |
- activity_main.xml juga ditambahkan fragment maps:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <fragment android:id="@+id/map" android:name="com.google.android.gms.maps.SupportMapFragment" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.mapwithmarker.MapsMarkerActivity" /> </RelativeLayout> |
- Selanjutnya di MainActivity.java pada public class MainActivity extends AppCompatActivity tambahkan implements OnMapReadyCallback, jadinya akan seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 |
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } |
- Habis itu buat implements methode OnMapReady, jadi seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override public void onMapReady(GoogleMap googleMap) { } } |
- Kemudian secara keseluruhan penambahan pemanggil id fragment yang ada pada activity_main.xml dan isi dari OnMapReady tersebut, seperti berikut:
|
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 |
package com.ivanjul.tutorialmaps; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import com.google.android.gms.maps.CameraUpdateFactory; import com.google.android.gms.maps.GoogleMap; import com.google.android.gms.maps.OnMapReadyCallback; import com.google.android.gms.maps.SupportMapFragment; import com.google.android.gms.maps.model.LatLng; import com.google.android.gms.maps.model.MarkerOptions; public class MainActivity extends AppCompatActivity implements OnMapReadyCallback{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map); mapFragment.getMapAsync(this); } @Override public void onMapReady(GoogleMap googleMap) { // Add a marker in Sydney, Australia, // and move the map's camera to the same location. LatLng sydney = new LatLng(-5.1992425,105.0016604); googleMap.addMarker(new MarkerOptions().position(sydney) .title("Lapangan Voly Dekat Rumah Saya")); googleMap.moveCamera(CameraUpdateFactory.newLatLng(sydney)); } } |
- Setelah itu tinggal dijalankan pada android.
Selebihnya seperti itu, jika ada error bisa komentar dibawah ya. Lebih jelasnya lihat video diatas.
Selanjutnya