# Working with Maps

# Adding a map in Xamarin.Forms (Xamarin Studio)

You can simply use the native map APIs on each platform with Xamarin Forms. All you need is to download the Xamarin.Forms.Maps package from nuget and install it to each project (including the PCL project).

# Maps Initialization

First of all you have to add this code to your platform-specific projects. For doing this you have to add the Xamarin.FormsMaps.Init method call, like in the examples below.

# iOS project

File AppDelegate.cs

[Register("AppDelegate")]
public partial class AppDelegate : Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
    public override bool FinishedLaunching(UIApplication app, NSDictionary options)
    {
        Xamarin.Forms.Forms.Init();
        Xamarin.FormsMaps.Init();

        LoadApplication(new App());

        return base.FinishedLaunching(app, options);
    }
}

# Android project

File MainActivity.cs

[Activity(Label = "MapExample.Droid", Icon = "@drawable/icon", Theme = "@style/MyTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
    protected override void OnCreate(Bundle bundle)
    {
        TabLayoutResource = Resource.Layout.Tabbar;
        ToolbarResource = Resource.Layout.Toolbar;

        base.OnCreate(bundle);

        Xamarin.Forms.Forms.Init(this, bundle);
        Xamarin.FormsMaps.Init(this, bundle);

        LoadApplication(new App());
    }
}

# Platform Configuration

Additional configuration steps are required on some platforms before the map will display.

# iOS project

In iOS project you just have to add 2 entries to your Info.plist file:

  • NSLocationWhenInUseUsageDescription string with value We are using your location
  • NSLocationAlwaysUsageDescription string with value Can we use your location

Info.plist file (opens new window)

# Android project

To use Google Maps you have to generate an API key and add it to your project. Follow the instruction below to get this key:

  • (Optional) Find where your keytool tool location (default is `/System/Library/Frameworks/JavaVM.framework/Versions/Current/Commands`)
  • (Optional) Open terminal and go to your keytool location: `cd /System/Library/Frameworks/JavaVM.framework/Versions/Current/Commands`
  • Run the following keytool command: `keytool -list -v -keystore "/Users/[USERNAME]/.local/share/Xamarin/Mono for Android/debug.keystore" -alias androiddebugkey -storepass android -keypass android` Where [USERNAME] is, obviously, your current user folder. You should get something similar to this in the output:
    Alias name: androiddebugkey
    Creation date: Jun 30, 2016
    Entry type: PrivateKeyEntry
    Certificate chain length: 1
    Certificate[1]:
    Owner: CN=Android Debug, O=Android, C=US
    Issuer: CN=Android Debug, O=Android, C=US
    Serial number: 4b5ac934
    Valid from: Thu Jun 30 10:22:00 EEST 2016 until: Sat Jun 23 10:22:00 EEST 2046
    Certificate fingerprints:
             MD5:  4E:49:A7:14:99:D6:AB:9F:AA:C7:07:E2:6A:1A:1D:CA
             SHA1: 57:A1:E5:23:CE:49:2F:17:8D:8A:EA:87:65:44:C1:DD:1C:DA:51:95
             SHA256: 70:E1:F3:5B:95:69:36:4A:82:A9:62:F3:67:B6:73:A4:DD:92:95:51:44:E3:4C:3D:9E:ED:99:03:09:9F:90:3F
             Signature algorithm name: SHA256withRSA
             Version: 3
    
    
  • All we need in this output is the SHA1 certificate fingerprint. In our case it equals to this:
    57:A1:E5:23:CE:49:2F:17:8D:8A:EA:87:65:44:C1:DD:1C:DA:51:95
    
    

    Copy or save somewhere this key. We will need it later on.

  • Go to Google Developers Console (opens new window), in our case we have to add Google Maps Android API (opens new window), so choose it: enter image description here (opens new window)

  • Google will ask you to create a project to enable APIs, follow this tip and create the project: Tip to create a project (opens new window) Page for creating a project (opens new window)

  • Enable Google Maps API for your project: Enable API (opens new window) After you have enabled api, you have to create credentials for your app. Follow this tip: Go to Credentials (opens new window)

  • On the next page choose the Android platform, tap on "What credentials do I need?" button, create a name for your API key, tap on "Add package name and fingerprint", enter your package name and your SHA1 fingerprint from the step 4 and finally create an API key: Create your api (opens new window) To find your package name in Xamarin Studio go to your .Droid solution -> AndroidManifest.xml: Android package name (opens new window)

  • After creation copy the new API key (don't forget to press the "Done" button after) and paste it to your AndroidManifest.xml file: Finish API key (opens new window) File AndroidManifest.xml

    <?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="documentation.mapexample">
        <uses-sdk
            android:minSdkVersion="15" />
        <application
            android:label="MapExample">
            <meta-data
                android:name="com.google.android.geo.API_KEY"
                android:value="AIzaSyBAg8X-t4pOIDDp3q5Ph45jKUIVjo_RnxU" />
            <meta-data
                android:name="com.google.android.gms.version"
                android:value="@integer/google_play_services_version" />
        </application>
    </manifest>        
    
    

    You'll also need to enable some permissions in your manifest to enable some additional features:

      1. Access Coarse Location
      2. Access Fine Location
      3. Access Location Extra Commands
      4. Access Mock Location
      5. Access Network State
      6. Access Wifi State
      7. Internet

        Android permissions (opens new window) Although, the last two permissions are required to download Maps data. Read about Android permissions (opens new window) to learn more. That's all the steps for Android configuration.

        Note: if you want to run your app on android simulator, you have to install Google Play Services on it. Follow this tutorial (opens new window) to install Play Services on Xamarin Android Player. If you can't find google play services update after the play store installation, you can update it directly from your app, where you have dependency on maps services
    • # Adding a map

      Adding map view to your crossplatform project is quite simple. Here is an example of how you can do it (I'm using PCL project without XAML).

      # PCL project

      File MapExample.cs

      public class App : Application
      {
          public App()
          {
              var map = new Map();
              map.IsShowingUser = true;
      
              var rootPage = new ContentPage();
              rootPage.Content = map;
      
              MainPage = rootPage;
          }
      }
      
      

      That's all. Now if you'll run your app on iOS or Android, it will show you the map view: Xamarin.Forms Maps (opens new window)

      # Remarks

      If you're going to run your project on another computer, you'll need to generate a new API key for it, because SHA-1 fingerprints will not match for different build machines.

      You can explore the project, described in example Adding a map in Xamarin.Forms here (opens new window)