I am going to do a small series of posts on Xamarin Forms custom map renderers. Xamarin Forms comes with a stock Map control that you can add to your page, and it works pretty well if you are ok with just using the stock map pins. But if you want to do something a little bit different, or you want some kind of interaction, you will need to build up a custom renderer for each platform.

In this post, we will talk about getting started with your custom renderer on Android. You will need to use nuget to add the Xamarin.Forms.Maps package to your projects. Remember, you will also need to request an API key from Google to use Google Maps. To do that, follow these instructions. Once you have your key, you will need to add it to the AndroidManifest.xml file and and declare your app capabilities. For this, follow these instructions. Don’t forget to add in the Maps initializations to the MainActivity file on your droid project.

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

        base.OnCreate(bundle);
        Microsoft.WindowsAzure.MobileServices.CurrentPlatform.Init();

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

        LoadApplication(new App());
    }
}

At this point, we should be able to add in the Map control to our Page as follows:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
	xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
	prism:ViewModelLocator.AutowireViewModel="True"
	xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
	Title="Map"
	x:Class="DevDaysSpeakers.View.MapPage">

	<Grid>
		<maps:Map IsShowingUser="True" MapType="Street" />
	</Grid>

</ContentPage>

Let’s not forget, our app is using the Prism framework, so we need to add our new page to the navigation stack. Let’s head over to the App class and add in our new page:

protected override void RegisterTypes()
{
    // ... other registrations were here

    // our page registrations
    Container.RegisterTypeForNavigation<View.SpeakersPage,ViewModel.SpeakersViewModel>(PageKeys.Speakers);
    Container.RegisterTypeForNavigation<View.DetailsPage, ViewModel.DetailsViewModel>(PageKeys.Details);
    Container.RegisterTypeForNavigation<View.MapPage, ViewModel.MapViewModel>(PageKeys.Map);
}

To get to this page, I cheated and added a “Map” button to the SpeakersPage which will navigate over to the Map page. In the ContentPage constructor, I also set the map view region to a specific area.

If you run the app now, tapping the map button should navigate you over to the new MapPage and display a google map. If for some reason the app is crashing when starting up, try cleaning your solution and rebuilding it.

At this point, we now have standard Xamarin Forms map being displayed in our app. Next we will look at changing the look of the pins.

I should have some code up in GitHub soon, I would just like to get a bit closer to finish the final posts in the series before posting everything.