Creating cross-platform mobile map application with Xamarin in 10 minutes

Quick tutorial: how to create mobile app with maps using Xamarin just in 10 minutes.


  • Mac computer with installed XCode and Xamarin Studio
  • Subscription to any Xamarin plan starting from Indie and above
  • Basic C# skills

1. Start new solution in Xamarin Studio, select Cross-platform App -> Blank Xamarin.Forms.App


2. Call the project MapDemo (or any other name you like), check both Android & iOS platforms and use Portable Class Library

Screen Shot 2015-08-19 at 23.53.08

3. Now compile your application and start in iOS simulator, you should get the screen as below


4. Before we start to code, it is necessary to add package to support Xamarin maps. Repeat the operation below for every subproject (MapDemo, MapDemo.iOS, MapDemo.Droid): right click on “Packages” and select “Add packages…”

Screen Shot 2015-08-19 at 23.54.01

5. Search for “xamarin.forms.maps” and add the package to the project

Screen Shot 2015-08-19 at 23.54.51

6. Let’s test first map in iOS application. Go to the project MapDemo.iOS, open file “AppDelegate.cs” and add the following line as shown below: global::Xamarin.FormsMaps.Init();


This operation initialises Xamarin maps component for iOS devices.

7. Go back to cross-platform project “MapDemo”, open the file “MapDemo.cs”, add the following directive in top of the file: using Xamarin.Forms.Maps;


8. Now change the method “App” of the class Application to add the map on the screen

        public App() {

            var map = new Map( MapSpan.FromCenterAndRadius(
                new Position(41.39479,2.14876), Distance.FromKilometers(5.0))) {
                IsShowingUser = false,
                HasZoomEnabled = true,
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.FillAndExpand,

            var stack = new StackLayout { 
                Spacing = 0, 
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.FillAndExpand, 


            MainPage = new ContentPage {
                Content = stack

Screen Shot 2015-08-20 at 00.33.17

We are creating map here (parameters of the map are self explanatory: coordinates, zoom and so on), placing the map into StackLayout and making it expanded to the full screen. Just after that we create new ContentPage and adding StackLayout there.

9. That’s it! Now compile the app and start it in iOS simulator, you should see Barcelona on the map 🙂


10. Let’s make the map of Barcelona more interesting putting some sightseeing there with pins, add the following code just after map initialisation:

            map.Pins.Add( new Pin {
                Type = PinType.Generic,
                Position = new Position(41.4036299,2.1743558),
                Label = "Sagrada Familia",
            map.Pins.Add( new Pin {
                Type = PinType.Generic,
                Position = new Position(41.362959,2.1650636),
                Label = "Montjuïc Castle",
            map.Pins.Add( new Pin {
                Type = PinType.Generic,
                Position = new Position(41.387008,2.2004736),
                Label = "Port Olímpic de Barcelona",

Now you should see the following screen after application start:


Enjoy your first Xamarin application with map and stay tuned, next tutorial will explain how to activate map support for Android application.

, , , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: