Membuat Aplikasi Android Markers dari
Database MySQL di Tampilkan pada
Google Map API
By Dedy Kuncoro, [Link]
[Link]
Aplikasi ini menampilkan data Markers dari database MySQL ke Google Map API. Kemudian
apabila dialog pada marker di klik akan menampilkan Toast dari nama tempat Marker tersebut.
Sebelum memulai tutorial ini teman-teman harus membaca posting Android Google Map API
Tutorial sebelum memulai membuat dan mengikuti tutorial ini!
Langkah pertama yaitu membuat database dengan nama wisatademak kemudian membuat
tabel dengan nama wisata dan struktur tabelnya seperti berikut ini :
Column Name Data Type Lenght Primary Key Not null Auto Increment
id int 5 v v v
nama varchar 30
lat double
lng double
Membuat web service untuk parsing data aplikasi android.
[Link]
Untuk menampilkan nama lokasi-lokasi Markers. Coding-nya disini.
Untuk hasil JSON nya bisa dilihat disini.
Sekarang membuat aplikasi pada Android Studio. Buat project baru di Android Studio File ⇒
New Project. Kemudian pilih Empty Activity dan melanjutkannya hingga selesai.
activity_main.xml
Tampilan untuk tampilan google map.
1 <?xml version="1.0" encoding="utf-8"?>
2 <fragment xmlns:android="[Link]
3 android:id="@+id/map"
4 android:name="[Link]"
android:layout_width="match_parent"
5
android:layout_height="match_parent" />
6
Buka [Link] dan tambahkan Volley library dan Google Map Play Service library
didalamnya.
1 compile '[Link]:library-aar:1.0.0'
2 compile '[Link]:play-services:10.2.1'
[Link]
1
2 dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
3 androidTestCompile('[Link]:espresso-core:2.2.2', {
4 exclude group: '[Link]', module: 'support-annotations'
5 })
6 compile '[Link]:appcompat-v7:26+'
7 compile '[Link]:constraint-layout:1.0.2'
compile '[Link]:library-aar:1.0.0' /*tambahan*/
8 compile '[Link]:play-services:10.2.1' /*tambahan*/
9 testCompile 'junit:junit:4.12'
10 }
11
Agar project terstruktur dan terorganisir, buat paket dengan nama app. Untuk membuat paket
baru , klik kanan pada src=>New=>Peckage dan memberikan nama paket .
Contoh : [Link].
Buat class [Link] didalam package app dan tambah coding seperti dibawah ini.
Class tunggal yang menginisialisasi class global yang diperlukan. Semua objek yang
berhubungan dengan volley diinisialisasi di sini.
[Link]
1 package [Link];
2
import [Link];
3
import [Link];
4
5 import [Link];
6 import [Link];
7 import [Link];
8 import [Link];
9
/**
10 * Created by Kuncoro on 15/06/2017.
11 */
12 public class AppController extends Application {
13
14 public static final String TAG = [Link]();
15
16 private RequestQueue mRequestQueue;
17
private static AppController mInstance;
18
19 @Override
20 public void onCreate() {
21 [Link]();
22 mInstance = this;
}
23
24
public static synchronized AppController getInstance() {
25 return mInstance;
26 }
27
28 public RequestQueue getRequestQueue() {
29 if (mRequestQueue == null) {
mRequestQueue = [Link](getApplicationContext());
30 }
31
32
33
34
35
return mRequestQueue;
36 }
37
38 public <T> void addToRequestQueue(Request<T> req, String tag) {
39 [Link]([Link](tag) ? TAG : tag);
40 [Link](new DefaultRetryPolicy(0, DefaultRetryPolicy.DEFAULT_MAX
41 DefaultRetryPolicy.DEFAULT_BACKOFF_MULT));
getRequestQueue().add(req);
42 }
43
44 public <T> void addToRequestQueue(Request<T> req) {
45 [Link](TAG);
46 [Link](new DefaultRetryPolicy(0, DefaultRetryPolicy.DEFAULT_MAX
DefaultRetryPolicy.DEFAULT_BACKOFF_MULT));
47
getRequestQueue().add(req);
48 }
49
50 public void cancelPendingRequests(Object tag) {
51 if (mRequestQueue != null) {
52 [Link](tag);
}
53 }
54
55 }
56
57
58
Buka [Link] dan tambahkan coding seperti dibawah ini.
[Link]
1 package [Link];
2
import [Link];
3
import [Link];
4 import [Link];
5 import [Link];
6
7 import [Link];
8 import [Link];
import [Link];
9 import [Link];
10 import [Link];
11 import [Link];
12 import [Link];
13 import [Link];
import [Link];
14 import [Link];
15 import [Link];
16 import [Link];
17 import [Link];
18
import [Link];
19 import [Link];
20 import [Link];
21
/**
22
* Created by Kuncoro on 15/06/2017.
23 */
24 public class MainActivity extends FragmentActivity implements OnMapReadyCallback {
25
26 MapFragment mapFragment;
27 GoogleMap gMap;
MarkerOptions markerOptions = new MarkerOptions();
28 CameraPosition cameraPosition;
29 LatLng center, latLng;
30 String title;
31
32 public static final String ID = "id";
33 public static final String TITLE = "nama";
public static final String LAT = "lat";
34 public static final String LNG = "lng";
35
36 private String url = "[Link]
37
38 String tag_json_obj = "json_obj_req";
39
40 @Override
protected void onCreate(Bundle savedInstanceState) {
41 [Link](savedInstanceState);
42 setContentView([Link].activity_main);
43
44 mapFragment = (MapFragment) getFragmentManager().findFragmentById([Link]
45 [Link](this);
46
47 }
48
@Override
49 public void onMapReady(GoogleMap googleMap) {
50 gMap = googleMap;
51
52 // Mengarahkan ke alun-alun Demak
53 center = new LatLng(-6.894796, 110.638413);
54 cameraPosition = new [Link]().target(center).zoom(10).buil
[Link]([Link](cameraPositi
55
56 getMarkers();
57 }
58
59 private void addMarker(LatLng latlng, final String title) {
60 [Link](latlng);
[Link](title);
61 [Link](markerOptions);
62
63 [Link](new [Link](
64 @Override
65 public void onInfoWindowClick(Marker marker) {
66 [Link](getApplicationContext(), [Link](), Toast.L
}
67 });
68 }
69
70 // Fungsi get JSON marker
private void getMarkers() {
71
StringRequest strReq = new StringRequest([Link], url, new Resp
72
73 @Override
74 public void onResponse(String response) {
75 Log.e("Response: ", [Link]());
76
77 try {
JSONObject jObj = new JSONObject(response);
78 String getObject = [Link]("wisata");
79 JSONArray jsonArray = new JSONArray(getObject);
80
81 for (int i = 0; i < [Link](); i++) {
82 JSONObject jsonObject = [Link](i);
83 title = [Link](TITLE);
latLng = new LatLng([Link]([Link]
84 [Link]([Link](LNG)));
85
86 // Menambah data marker untuk di tampilkan ke google map
87 addMarker(latLng, title);
88 }
89
} catch (JSONException e) {
90 // JSON error
91 [Link]();
92 }
93
94 }
95 }, new [Link]() {
96
@Override
97 public void onErrorResponse(VolleyError error) {
98 Log.e("Error: ", [Link]());
99 [Link]([Link], [Link](), [Link]
100 }
101 });
102
[Link]().addToRequestQueue(strReq, tag_json_obj);
103 }
104
105 }
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
Tambahkan perijinan INTERNET, meta-data dan juga masukan KUNCI API teman-teman yang
didapat pada posting Android Google Map API Tutorial.
[Link]
1
2
3 <?xml version="1.0" encoding="utf-8"?>
4 <manifest xmlns:android="[Link]
5 package="[Link]">
6
7 <uses-permission android:name="[Link]" />
8
<application
9 android:name=".[Link]" <!-- tambahan -->
10 android:allowBackup="true"
11 android:icon="@mipmap/ic_launcher"
12 android:label="@string/app_name"
13 android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
14 android:theme="@style/AppTheme">
15 <activity android:name=".MainActivity">
16 <intent-filter>
17 <action android:name="[Link]" />
18
<category android:name="[Link]" />
19
</intent-filter>
20 </activity>
21 <!-- tambahan -->
22 <meta-data
23 android:name="[Link].API_KEY"
android:value="KINCI_API_MU" />
24
25
<meta-data
26 android:name="[Link]"
27 android:value="@integer/google_play_services_version" />
28 <!-- tambahan -->
29 </application>
30
</manifest>
31
32
33
Run Aplikasinya.