Membuat Aplikasi Android Markers dari

Database MySQL di Tampilkan pada

Google Map API
By Dedy Kuncoro, https://dedykuncoro.com/2017/06/membuat-aplikasi-android-markers-dari-database-mysql-
di-tampilkan-pada-google-map-api.html

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.

markers.php
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="http://schemas.android.com/apk/res/android"
3     android:id="@+id/map"
4     android:name="com.google.android.gms.maps.MapFragment"
    android:layout_width="match_parent"
5
    android:layout_height="match_parent" />
6
 

Buka build.gradle dan tambahkan Volley library dan Google Map Play Service library
didalamnya.
1 compile 'com.mcxiaoke.volley:library-aar:1.0.0'
2 compile 'com.google.android.gms:play-services:10.2.1'
build.gradle
1
2 dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
3     androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
4         exclude group: 'com.android.support', module: 'support-annotations'
5     })
6     compile 'com.android.support:appcompat-v7:26+'
7     compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.mcxiaoke.volley:library-aar:1.0.0' /*tambahan*/
8     compile 'com.google.android.gms: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 : com.dedykuncoro.googlemapapimysql.

 
Buat class AppController.java 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.
AppController.java
1 package com.dedykuncoro.googlemapapimysql.app;
2  
import android.app.Application;
3
import android.text.TextUtils;
4
 
5 import com.android.volley.DefaultRetryPolicy;
6 import com.android.volley.Request;
7 import com.android.volley.RequestQueue;
8 import com.android.volley.toolbox.Volley;
9  
/**
10  * Created by Kuncoro on 15/06/2017.
11  */
12 public class AppController extends Application {
13  
14     public static final String TAG = AppController.class.getSimpleName();
15  
16     private RequestQueue mRequestQueue;
17  
    private static AppController mInstance;
18
 
19     @Override
20     public void onCreate() {
21         super.onCreate();
22         mInstance = this;
    }
23
24  
    public static synchronized AppController getInstance() {
25         return mInstance;
26     }
27  
28     public RequestQueue getRequestQueue() {
29         if (mRequestQueue == null) {
            mRequestQueue = Volley.newRequestQueue(getApplicationContext());
30         }
31  
32
33
34
35
        return mRequestQueue;
36     }
37  
38     public <T> void addToRequestQueue(Request<T> req, String tag) {
39         req.setTag(TextUtils.isEmpty(tag) ? TAG : tag);
40         req.setRetryPolicy(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         req.setTag(TAG);
46         req.setRetryPolicy(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             mRequestQueue.cancelAll(tag);
        }
53     }
54  
55 }
56
57
58
 

Buka MainActivity.java dan tambahkan coding seperti dibawah ini.

MainActivity.java
1 package com.dedykuncoro.googlemapapimysql;
2  
import android.support.v4.app.FragmentActivity;
3
import android.os.Bundle;
4 import android.util.Log;
5 import android.widget.Toast;
6  
7 import com.android.volley.Request;
8 import com.android.volley.Response;
import com.android.volley.VolleyError;
9 import com.android.volley.toolbox.StringRequest;
10 import com.dedykuncoro.googlemapapimysql.app.AppController;
11 import com.google.android.gms.maps.CameraUpdateFactory;
12 import com.google.android.gms.maps.GoogleMap;
13 import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.OnMapReadyCallback;
14 import com.google.android.gms.maps.model.CameraPosition;
15 import com.google.android.gms.maps.model.LatLng;
16 import com.google.android.gms.maps.model.Marker;
17 import com.google.android.gms.maps.model.MarkerOptions;
18  
import org.json.JSONArray;
19 import org.json.JSONException;
20 import org.json.JSONObject;
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 = "http://wisatademak.dedykuncoro.com/Main/json_wisata";
37  
38     String tag_json_obj = "json_obj_req";
39  
40     @Override
    protected void onCreate(Bundle savedInstanceState) {
41         super.onCreate(savedInstanceState);
42         setContentView(R.layout.activity_main);
43  
44         mapFragment = (MapFragment) getFragmentManager().findFragmentById(R.id.map
45         mapFragment.getMapAsync(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 CameraPosition.Builder().target(center).zoom(10).buil
        googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPositi
55
 
56         getMarkers();
57     }
58  
59     private void addMarker(LatLng latlng, final String title) {
60         markerOptions.position(latlng);
        markerOptions.title(title);
61         gMap.addMarker(markerOptions);
62  
63         gMap.setOnInfoWindowClickListener(new GoogleMap.OnInfoWindowClickListener(
64             @Override
65             public void onInfoWindowClick(Marker marker) {
66                 Toast.makeText(getApplicationContext(), marker.getTitle(), Toast.L
            }
67         });
68     }
69  
70     // Fungsi get JSON marker
    private void getMarkers() {
71
        StringRequest strReq = new StringRequest(Request.Method.POST, url, new Resp
72
 
73             @Override
74             public void onResponse(String response) {
75                 Log.e("Response: ", response.toString());
76  
77                 try {
                    JSONObject jObj = new JSONObject(response);
78                     String getObject = jObj.getString("wisata");
79                     JSONArray jsonArray = new JSONArray(getObject);
80  
81                     for (int i = 0; i < jsonArray.length(); i++) {
82                         JSONObject jsonObject = jsonArray.getJSONObject(i);
83                         title = jsonObject.getString(TITLE);
                        latLng = new LatLng(Double.parseDouble(jsonObject.getStrin
84 Double.parseDouble(jsonObject.getString(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                     e.printStackTrace();
92                 }
93  
94             }
95         }, new Response.ErrorListener() {
96  
            @Override
97             public void onErrorResponse(VolleyError error) {
98                 Log.e("Error: ", error.getMessage());
99                 Toast.makeText(MainActivity.this, error.getMessage(), Toast.LENGTH
100             }
101         });
102  
        AppController.getInstance().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.
AndroidManifest.xml
1
2
3 <?xml version="1.0" encoding="utf-8"?>
4 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
5     package="com.dedykuncoro.googlemapapimysql">
6  
7     <uses-permission android:name="android.permission.INTERNET" />
8  
    <application
9         android:name=".app.AppController" <!-- 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="android.intent.action.MAIN" />
18  
                <category android:name="android.intent.category.LAUNCHER" />
19
            </intent-filter>
20         </activity>
21 <!-- tambahan -->
22         <meta-data
23             android:name="com.google.android.geo.API_KEY"
            android:value="KINCI_API_MU" />
24
25  
        <meta-data
26             android:name="com.google.android.gms.version"
27             android:value="@integer/google_play_services_version" />
28 <!-- tambahan -->
29     </application>
30  
</manifest>
31
32
33
 
Run Aplikasinya.