If your application is going to have a big focus on Maps, and a lot of its functionality relies on displaying information inside them, I would recommend using Xamarin native to build that app, however, if you only need to use map slightly, to display some information here and there, but the main functionality of your app is something else, and pixel-perfect accuracy for the maps is not vital, there is a way of how to use Maps on a Xamarin Forms app.

In this post, I will focus on getting the maps ready on iOS, but keep in mind that the code used to display this will work on both iOS and Android (it's just that preparing the Android project to display maps will be covered later).

All the code for this post is in this repository, I encourage you to fork it and make any changes you may need.

Preparing the iOS project

It will be until a later post that I will talk about preparing the Android project, but after this section, I will talk about the shared part of defining a map in XAML (although that will also be a part of the following post).

Anyways, the first step is to add a reference to a NuGet Package to both the iOS and the PCL (or .NET Standard) projects. The package that you will need to add is the Xamarin.Forms.Maps package:

Screen Shot 2018-03-09 at 12.02.56 PM.png

Don't forget this package reference needs to be added to both the shared library project and the iOS project.

Now that the package is referenced, you will have access to the FormsMaps class, that will be the one tasked with initializing the maps on iOS, similar to how Xamarin Forms is initialized. Navigate to the AppDelegate class, inside the iOS project, where you will find the FinishedLaunching method. Here, and right below the Init method call from the Forms class, another Initi method will have to be called:

Xamarin.FormsMaps.Init();

This is enough to make your iOS app be ready to start displaying maps.

Defining Maps on XAML

Now the only thing that is left is to define the Map like you would define any other element. Doing it through XAML will first require to add a namespace pointer inside the definition of the ContentPage that points to that NuGet package that we added. This namespace is the one that contains the Map class.

xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"

Now through this namespace (that I named maps) I will be able to access the Map class and define a map as the Content for the ContentPage. Notice that I am setting the VerticalOptions and HorizontalOptions to FillAndExpand so the map uses all the available space on screen.

Screen Shot 2018-03-09 at 12.52.02 PM.png

Eventually, remember, this will work on Android as well (we only have to prepare that project, the XAML code is the same). And what is interesting to me is that these maps are rendered as entirely native views, and the fact that we could go to the Map and change its type to Satellite, Hybrid or street is great, because Xamarin Forms is taking care of all the stuff needed for this to work on both platforms seemlessly.

<maps:Map VerticalOptions="FillAndExpand"
          HorizontalOptions="FillAndExpand"
          MapType="Street"/>

This topic, along with many many others, is covered in greater depth in my 25-hour long "The Complete Xamarin Developer Course: iOS and Android" course, which you can practically steal from me by

Enrolling Here