Tutorial Xamarin Form : Implementasi Maps pada Cross Platform

Pengaplikasian maps pada xamarin form agak sedikit berbeda, kita harus mengkonfigurasi beberapa hal. Nuget yang digunakanpun berbeda yaitu xamarin.forms.maps  . Pada tutorial ini saya belum menggunakan web services untuk membuat pin locationnya, karena saya rasa ini baru langkah dasar. Mungkin akan kita lanjutkan pada tutorial selanjutnya.

Perlu diketahui xamarin form yang saya gunakan pada tutorial ini hanya untuk pembuatan aplikasi android dan ios tidak untuk windows phone. Jadi konfigurasinya akan saya jelaskan pada dua aplikasi tersebut saja ya. Anda bisa mempelajari lebih dalam pada link yang disediakan oleh xamarin yaitu https://developer.xamarin.com/guides/xamarin-forms/user-interface/map/ .

Nah, berikut adalah langkah-langkah yang harus terlebih dahulu kita jalankan.

Langkah 1 
Buatlah sebuah project cross platform dengan portable , dengan nama mapsplatform

Langkah 2 
Siapkan google api key di https://console.developers.google.com . Api key tersebut akan kita pasang pada android manifest

Langkah 3
Setelah anda berhasil membuat project dengan nama mapsplatform , pada nama project klik kanan -> Add -> Nuget Packages -> cari dan pilih xamarin.forms.maps -> lalu add package. Tunggu hingga instalasi selesai.

Langkah 4
Lakukan juga pada mapsplatform.Droid klik kanan -> Add -> Nuget Packages -> cari dan pilih xamarin.forms.maps -> lalu add package. Tunggu hingga instalasi selesai.

Langkah 5
Lakukan juga pada mapsplatform.iOS klik kanan -> Add -> Nuget Packages -> cari dan pilih xamarin.forms.maps -> lalu add package. Tunggu hingga instalasi selesai.

Langkah 6
Setelah semua plugins terinstalasi sekarang lakukan konfigurasi pada androidmanifest.xml yang terletak pada mapsplatform.Droid terletak pada folder Properties rubah code sebagai berikut

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="namapackagesmu.mapsplatform">
 <uses-sdk android:minSdkVersion="15" android:targetSdkVersion="26" />
 <application android:label="Maps Platform">
  <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="API_KEY_KAMU" />
  <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />
 </application>
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
 <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
</manifest>

Perlu diperhatikan pada package = "", sesuaikan dengan nama packages anda, lalu pada android:value sesuaikan dengan API KEY Google Console anda. Lalu simpan.

Langkah 7
Buka file MainActivity.cs pada mapsplatform.Droid tambahkan code berikut ini

global::Xamarin.FormsMaps.Init(this, bundle);

Taruh tepat dibawah code

global::Xamarin.Forms.Forms.Init(this, bundle);

Langkah 8 
Buka file AppDelegate.cs pada mapsplatform.Ios lalu tambahkan code berikut ini

global::Xamarin.FormsMaps.Init();

taruh tepat dibawah code

global::Xamarin.Forms.Forms.Init();

Langkah 9

Buka file info.plist pada mapsplatform.ios lalu tambahkan key berikut

<key>NSLocationAlwaysUsageDescription</key>
    <string>Can we use your location</string>
<key>NSLocationWhenInUseUsageDescription</key>
    <string>We are using your location</string>

Langkah 10

Sekarang kita buka file mapsplatformPage.xaml.cs kemudian masukan code sebagai berikut

using Xamarin.Forms;
using Xamarin.Forms.Maps;
using System;

namespace mapsplatform
{
    public partial class mapsplatformPage : ContentPage
    {
        Map map;

        public mapsplatformPage()
        {
            map = new Map
            {
                IsShowingUser = true,
                HeightRequest = 100,
                WidthRequest = 100,
                VerticalOptions = LayoutOptions.FillAndExpand
            };

            map.Pins.Add(new Pin
            {
                Position = new Position(-7.4396591, 109.2116427),
                Label = "Banyu Center",
                Address = "Xamarin Studio Apps"
            });
            map.Pins.Add(new Pin
            {
                Position = new Position(-7.4396123, 109.2170626),
                Label = "Hotel Artha",
                Address = "Hotel Purwokerto"
            });

            map.Pins.Add(new Pin
            {
                Position = new Position(-7.4394676, 109.2138207),
                Label = "SMK 75 Purwokerto",
                Address = "Sekolahan"
            });

            map.MoveToRegion(MapSpan.FromCenterAndRadius(
                new Position(-7.4396591, 109.2116427), Distance.FromMiles(1.5)));


            // put the page together
            Content = new StackLayout
            {
                Spacing = 0,
                Children = {
                    map
                }
            };
        }
    }
}

Pada kode diatas kita menambahkan 3 buah pin lokasi , yang sudah kita sesuaikan longitude dan latitudenya. Kita bisa menambahkan beberapa tambahan sesuai yang diinginkan.  Jika sudah lakukan debug pada aplikasi anda.

Demikianlah cara mengimplementasikan maps pada xamarin forms

Salam
Ipung Purwono