Posted by - Tuesday, November 21, 2017

Tutorial Xamarin Android : Membuat Multi Marker Goolge Maps dari Data JSON


Selamat malam, para pembaca yang budiman, sore tadi saya mencoba mengimplementasikan multi marker pada maps dengan data diambil dari JSON. Sebagai kasusnya saya ambil data wisata di Jawa Tengah ya. Nah data JSON nya diambil dari alamat ini nih https://banyu.center/pariwisataapp/api/getWisataMaps . Pemetaan semua lokasi yang ada di wilayah jawa tenga menggunakan xamarin android tentunya. lalu apa saja sih yang perlu kita siapkan?

Nah berikut ini yang perlu disiapkan oleh kalian :

Selanjutnya adalah mengikuti langkah-langkah sebagai berikut :

Langkah 1 :

Masukan code api key google tersebut pada AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.namapackage.namapackage" android:versionCode="2" android:versionName="1.0" android:installLocation="auto">
 <uses-sdk android:minSdkVersion="19" android:targetSdkVersion="25" />
 <application android:label="@string/app_name">
  <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="code api key kamu disini" />
  <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />
 </application>
 <user-permission android:name="com.googlemap.googlemap.permission.MAPS_RECEIVE" android:protectionLevel="signature" />
 <uses-permission android:name="com.googlemap.googlemap.permission.MAPS_RECEIVE" />
 <uses-permission android:name="com.google.android.providers.gsf.permisson.READ_GSERVICES" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>

Nah masukan kode api secret key nya ya, jangan lupa juga sesuaikan package namenya.

Langkah 2:

Buatlah sebuah layout dengan nama Maps.axml masukan code sebagai berikut


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <fragment
        android:id="@+id/googlemaps"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.MapFragment" />
</LinearLayout>







Nah , pada fragment masukan class nya ya class="com.google.android.gms.maps.MapFragment" />



Langkah 3



Buatlah sebuah activity dengan nama MapsActivity.cs




using Android.Widget;
using Android.OS;
using Android.Support.Design.Widget;
using Android.Support.V4.Widget;
using Android.Support.V7.Widget;
using Android.Support.V7.App;
using Android.Views;
using Android.App;
using SupportFragment = Android.Support.V4.App.Fragment;
using Android.Gms.Maps;
using Android.Gms.Maps.Model;
using System;
using System.Net;
using Newtonsoft.Json.Linq;

namespace PariwisataApp
{
 [Activity(Label = "Pariwisata App", MainLauncher = false, Theme = "@style/MyTheme.Splash")]
 public class MapActivity : AppCompatActivity, IOnMapReadyCallback 
 {

  //Buat variable 

  private GoogleMap GMap;  

  protected override void OnCreate(Bundle savedInstanceState)
  {

   base.OnCreate(savedInstanceState);
   SetContentView(Resource.Layout.Maps);
                        SetUpMap(); 

  

  }

  private void SetUpMap()
  {
   if (GMap == null)
   {
    FragmentManager.FindFragmentById<MapFragment>(Resource.Id.googlemaps).GetMapAsync(this);
   }
  }
  public void OnMapReady(GoogleMap googleMap)
  {
   this.GMap = googleMap;
   GMap.UiSettings.ZoomControlsEnabled = true;


   WebClient client = new WebClient();
   var jsonstring = client.DownloadString("https://banyu.center/pariwisataapp/api/getWisataMaps");
   JObject o = JObject.Parse(jsonstring);
   var ab = o.GetValue("data_wisata").ToString();
   JArray arr = JArray.Parse(ab);

   //string latitude = arr[0]["latitude"].ToString();
   //string longitude = arr[0]["longitude"].ToString();
   //string namanya = arr[0]["nama_wisata"].ToString();

   int x = arr.Count;
   //string[] data = new string[x];
   int i = 0;
   for (i = 0; i<x; i++)
            {
    string latitude = arr[i]["latitude"].ToString();
    string longitude = arr[i]["longitude"].ToString();
    string namanya = arr[i]["nama_wisata"].ToString();
    LatLng latlng = new LatLng(Convert.ToDouble(latitude), Convert.ToDouble(longitude));
    CameraUpdate camera = CameraUpdateFactory.NewLatLngZoom(latlng, 5);
    GMap.MoveCamera(camera);
    MarkerOptions options = new MarkerOptions().SetPosition(latlng).SetTitle(namanya);
    GMap.AddMarker(options);

   }

  } 


  //Fungsi ketika tombol back di prees
  public override void OnBackPressed()
  {
   if (FragmentManager.BackStackEntryCount != 0)
   {
    FragmentManager.PopBackStack();//fragmentManager.popBackStack();
   }
   else
   {
    base.OnBackPressed();
   }
  }


 }
}





Pada langkah ke tiga sesuaikan nama namespace dengan nama project kamu ya, selanjutnya perhatikan code ini




public class MapActivity : AppCompatActivity, IOnMapReadyCallback 



Kode tersebut akan memanggil fungsi maps. Selanjutnya.




 SetUpMap(); 



Panggil fungsi untuk set up maps




private void SetUpMap()
  {
   if (GMap == null)
   {
    FragmentManager.FindFragmentById<MapFragment>(Resource.Id.googlemaps).GetMapAsync(this);
   }
  }



Kode diatas adalah tempat menampilkan maps pada fragments.




public void OnMapReady(GoogleMap googleMap)
  {
   this.GMap = googleMap;
   GMap.UiSettings.ZoomControlsEnabled = true;


   WebClient client = new WebClient();
   var jsonstring = client.DownloadString("https://banyu.center/pariwisataapp/api/getWisataMaps");
   JObject o = JObject.Parse(jsonstring);
   var ab = o.GetValue("data_wisata").ToString();
   JArray arr = JArray.Parse(ab);

   //string latitude = arr[0]["latitude"].ToString();
   //string longitude = arr[0]["longitude"].ToString();
   //string namanya = arr[0]["nama_wisata"].ToString();

   int x = arr.Count;
   //string[] data = new string[x];
   int i = 0;
   for (i = 0; i<x; i++)
            {
    string latitude = arr[i]["latitude"].ToString();
    string longitude = arr[i]["longitude"].ToString();
    string namanya = arr[i]["nama_wisata"].ToString();
    LatLng latlng = new LatLng(Convert.ToDouble(latitude), Convert.ToDouble(longitude));
    CameraUpdate camera = CameraUpdateFactory.NewLatLngZoom(latlng, 5);
    GMap.MoveCamera(camera);
    MarkerOptions options = new MarkerOptions().SetPosition(latlng).SetTitle(namanya);
    GMap.AddMarker(options);

   }

  } 





Panggil data maps dengan mengkonsumsi data json dari web services




WebClient client = new WebClient();
   var jsonstring = client.DownloadString("https://banyu.center/pariwisataapp/api/getWisataMaps");
   JObject o = JObject.Parse(jsonstring);
   var ab = o.GetValue("data_wisata").ToString();
   JArray arr = JArray.Parse(ab);





Lalu looping agar data json dapat terbaca dan menjadi maps marker




int x = arr.Count;
   //string[] data = new string[x];
   int i = 0;
   for (i = 0; i<x; i++)
            {
    string latitude = arr[i]["latitude"].ToString();
    string longitude = arr[i]["longitude"].ToString();
    string namanya = arr[i]["nama_wisata"].ToString();
    LatLng latlng = new LatLng(Convert.ToDouble(latitude), Convert.ToDouble(longitude));
    CameraUpdate camera = CameraUpdateFactory.NewLatLngZoom(latlng, 5);
    GMap.MoveCamera(camera);
    MarkerOptions options = new MarkerOptions().SetPosition(latlng).SetTitle(namanya);
    GMap.AddMarker(options);

   }





Atur kamera posisi 5 untuk menampilkan regional daerah.




CameraUpdate camera = CameraUpdateFactory.NewLatLngZoom(latlng, 5);





Sekarang coba jalankan





Salam



Ipung Purwono









at























Labels:
,
,
























No comments:















Post a Comment


Mohon melakukan komentar dengan bahasa yang mudah dipahami, santun dan dengan bahasa yang baik.
























        

      










Subscribe to:
Post Comments (Atom)