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

Tutorial Xamarin Android : Membuat Multi Marker Goolge Maps dari Data JSON - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Tutorial Xamarin Android : Membuat Multi Marker Goolge Maps dari Data JSON, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel custom marker maps xamarin android, Artikel marker maps dari json xamarin, Artikel multi marker maps xamarin android, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

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

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 :

Akun gmail tentunya.
Membuat api keystore pada https://console.developers.google.com
Buatlah sebuah project disana lalu buatlah api secret key untuk credentials. Pastikan kalian mengaktifkan Api Maps nya ya. Nah api key tersebut akan di taruh pada AndroidManifest.xml.
Kalu bingun cara bikinnya boleh intip nih link dari csharp corner. http://www.c-sharpcorner.com/article/xamarin-android-create-an-sha-1-key-for-google-map-app-deve/
Okeh saya asumsikan bahwa kalian sudah memiliki api secret key.
Instal Google Play Services Component pada Xamarin Kamu.
Instal juga JSON.net Component pada Xamarin kamu ya.

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);

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

Sekianlah artikel Tutorial Xamarin Android : Membuat Multi Marker Goolge Maps dari Data JSON kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Tutorial Xamarin Android : Membuat Multi Marker Goolge Maps dari Data JSON dengan alamat link https://dev-create.blogspot.com/2020/02/tutorial-xamarin-android-membuat-multi.html

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

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

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

Fanspage Kami

Categories

Menu Footer Widget

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

Baca juga

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

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

Anda mungkin menyukai postingan ini

TEMUKAN KAMI

Fanspage Kami

Categories

Menu Footer Widget