Membuat Aplikasi Android Markers dari Database MySQL di Tampilkan pada Google Map API
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.
<?xml version="1.0" encoding="utf-8"?> <fragment xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/map" android:name="com.google.android.gms.maps.MapFragment" android:layout_width="match_parent" android:layout_height="match_parent" />
Buka build.gradle dan tambahkan Volley library dan Google Map Play Service library didalamnya.
compile 'com.mcxiaoke.volley:library-aar:1.0.0' compile 'com.google.android.gms:play-services:10.2.1'
build.gradle
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7:26+' compile 'com.android.support.constraint:constraint-layout:1.0.2' compile 'com.mcxiaoke.volley:library-aar:1.0.0' /*tambahan*/ compile 'com.google.android.gms:play-services:10.2.1' /*tambahan*/ testCompile 'junit:junit:4.12' }
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
package com.dedykuncoro.googlemapapimysql.app; import android.app.Application; import android.text.TextUtils; import com.android.volley.DefaultRetryPolicy; import com.android.volley.Request; import com.android.volley.RequestQueue; import com.android.volley.toolbox.Volley; /** * Created by Kuncoro on 15/06/2017. */ public class AppController extends Application { public static final String TAG = AppController.class.getSimpleName(); private RequestQueue mRequestQueue; private static AppController mInstance; @Override public void onCreate() { super.onCreate(); mInstance = this; } public static synchronized AppController getInstance() { return mInstance; } public RequestQueue getRequestQueue() { if (mRequestQueue == null) { mRequestQueue = Volley.newRequestQueue(getApplicationContext()); } return mRequestQueue; } public <T> void addToRequestQueue(Request<T> req, String tag) { req.setTag(TextUtils.isEmpty(tag) ? TAG : tag); req.setRetryPolicy(new DefaultRetryPolicy(0, DefaultRetryPolicy.DEFAULT_MAX_RETRIES, DefaultRetryPolicy.DEFAULT_BACKOFF_MULT)); getRequestQueue().add(req); } public <T> void addToRequestQueue(Request<T> req) { req.setTag(TAG); req.setRetryPolicy(new DefaultRetryPolicy(0, DefaultRetryPolicy.DEFAULT_MAX_RETRIES, DefaultRetryPolicy.DEFAULT_BACKOFF_MULT)); getRequestQueue().add(req); } public void cancelPendingRequests(Object tag) { if (mRequestQueue != null) { mRequestQueue.cancelAll(tag); } } }
Buka MainActivity.java dan tambahkan coding seperti dibawah ini.
MainActivity.java
package com.dedykuncoro.googlemapapimysql; import android.support.v4.app.FragmentActivity; import android.os.Bundle; import android.util.Log; import android.widget.Toast; import com.android.volley.Request; import com.android.volley.Response; import com.android.volley.VolleyError; import com.android.volley.toolbox.StringRequest; import com.dedykuncoro.googlemapapimysql.app.AppController; import com.google.android.gms.maps.CameraUpdateFactory; import com.google.android.gms.maps.GoogleMap; import com.google.android.gms.maps.MapFragment; import com.google.android.gms.maps.OnMapReadyCallback; import com.google.android.gms.maps.model.CameraPosition; 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 org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; /** * Created by Kuncoro on 15/06/2017. */ public class MainActivity extends FragmentActivity implements OnMapReadyCallback { MapFragment mapFragment; GoogleMap gMap; MarkerOptions markerOptions = new MarkerOptions(); CameraPosition cameraPosition; LatLng center, latLng; String title; public static final String ID = "id"; public static final String TITLE = "nama"; public static final String LAT = "lat"; public static final String LNG = "lng"; private String url = "http://wisatademak.dedykuncoro.com/Main/json_wisata"; String tag_json_obj = "json_obj_req"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mapFragment = (MapFragment) getFragmentManager().findFragmentById(R.id.map); mapFragment.getMapAsync(this); } @Override public void onMapReady(GoogleMap googleMap) { gMap = googleMap; // Mengarahkan ke alun-alun Demak center = new LatLng(-6.894796, 110.638413); cameraPosition = new CameraPosition.Builder().target(center).zoom(10).build(); googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition)); getMarkers(); } private void addMarker(LatLng latlng, final String title) { markerOptions.position(latlng); markerOptions.title(title); gMap.addMarker(markerOptions); gMap.setOnInfoWindowClickListener(new GoogleMap.OnInfoWindowClickListener() { @Override public void onInfoWindowClick(Marker marker) { Toast.makeText(getApplicationContext(), marker.getTitle(), Toast.LENGTH_SHORT).show(); } }); } // Fungsi get JSON marker private void getMarkers() { StringRequest strReq = new StringRequest(Request.Method.POST, url, new Response.Listener<String>() { @Override public void onResponse(String response) { Log.e("Response: ", response.toString()); try { JSONObject jObj = new JSONObject(response); String getObject = jObj.getString("wisata"); JSONArray jsonArray = new JSONArray(getObject); for (int i = 0; i < jsonArray.length(); i++) { JSONObject jsonObject = jsonArray.getJSONObject(i); title = jsonObject.getString(TITLE); latLng = new LatLng(Double.parseDouble(jsonObject.getString(LAT)), Double.parseDouble(jsonObject.getString(LNG))); // Menambah data marker untuk di tampilkan ke google map addMarker(latLng, title); } } catch (JSONException e) { // JSON error e.printStackTrace(); } } }, new Response.ErrorListener() { @Override public void onErrorResponse(VolleyError error) { Log.e("Error: ", error.getMessage()); Toast.makeText(MainActivity.this, error.getMessage(), Toast.LENGTH_LONG).show(); } }); AppController.getInstance().addToRequestQueue(strReq, tag_json_obj); } }
Tambahkan perijinan INTERNET, meta-data dan juga masukan KUNCI API teman-teman yang didapat pada posting Android Google Map API Tutorial.
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.dedykuncoro.googlemapapimysql"> <uses-permission android:name="android.permission.INTERNET" /> <application android:name=".app.AppController" <!-- tambahan --> android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <!-- tambahan --> <meta-data android:name="com.google.android.geo.API_KEY" android:value="KINCI_API_MU" /> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> <!-- tambahan --> </application> </manifest>
Run Aplikasinya.