Xamarin - Use Google Map

How to setup Google Map at Xamarin.Form project

To use Google Map at Xamarin.Form, you'll need register google API account to get the key, add use permission on android's AndroidManifest.xml file, then add code to use.

Nuget package file at Xamarin.Form project

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Xamarin.Forms" version="2.3.3.180" targetFramework="portable45-net45+win8+wp8+wpa81" />
  <package id="Xamarin.Forms.Maps" version="2.3.3.180" targetFramework="portable45-net45+win8+wp8+wpa81" />
</packages>

Start file, app.xaml.cs

using Xamarin.Forms;

namespace MapExample1
{
    public partial class App : Application
    {
        public static double ScreenHeight;
        public static double ScreenWidth;
        public App()
        {
            InitializeComponent();

            MainPage = new MapExample1.MapPage();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

xaml file for develop google map

<?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:local="clr-namespace:MapExample1;assembly=MapExample1"
             x:Class="MapExample1.MapPage">
  <ContentPage.Content>
    <local:CustomMap x:Name="customMap" MapType="Street" WidthRequest="{x:Static local:App.ScreenWidth}" HeightRequest="{x:Static local:App.ScreenHeight}" />
  </ContentPage.Content>
</ContentPage>

Map MapPage.xaml.cs code

using System.Collections.Generic;
using Xamarin.Forms;
using Xamarin.Forms.Maps;

namespace MapExample1
{
    public partial class MapPage : ContentPage
    {
        public MapPage()
        {
            InitializeComponent();

            var pin = new CustomPin
            {
                Pin = new Pin
                {
                    Type = PinType.Place,
                    Position = new Position(40.689249, -74.044500),
                    Label = "The Statue of Liberty in New York, USA",
                    Address = "New York, NY 10004",
                   
                },
                Id = "Xamarin",
                Url = "http://xamarin.com/about/",
                
            };

            customMap.CustomPins = new List<CustomPin> { pin };
            customMap.Pins.Add(pin.Pin);
            customMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(40.689249, -74.044500), Distance.FromMiles(1.0)));
        }
    }
}

Custom class for map object

using Xamarin.Forms.Maps;

namespace MapExample1
{
    public class CustomPin
    {
        public Pin Pin { get; set; }

        public string Id { get; set; }

        public string Url { get; set; }
    }
}

using System.Collections.Generic;
using Xamarin.Forms.Maps;

namespace MapExample1
{
    public class CustomMap : Map
    {
        public List CustomPins { get; set; }
    }
}

Above are all the sample code you need at Xamarin.Form project, but you also need following if you want to run on Android.

Xmarin.Form Android - nuget package file

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Xamarin.Android.Support.Animated.Vector.Drawable" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.Design" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.v4" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.v7.AppCompat" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.v7.CardView" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.v7.MediaRouter" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.v7.RecyclerView" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Android.Support.Vector.Drawable" version="23.3.0" targetFramework="monoandroid60" />
  <package id="Xamarin.Forms" version="2.3.3.180" targetFramework="monoandroid60" />
  <package id="Xamarin.Forms.Maps" version="2.3.3.180" targetFramework="monoandroid60" />
  <package id="Xamarin.GooglePlayServices.Base" version="29.0.0.1" targetFramework="monoandroid60" />
  <package id="Xamarin.GooglePlayServices.Basement" version="29.0.0.1" targetFramework="monoandroid60" />
  <package id="Xamarin.GooglePlayServices.Maps" version="29.0.0.1" targetFramework="monoandroid60" />
</packages>

Android - AndroidManifest.xml

This is the important part, if you want to use Google API, you have to create API key and replace to following, also, add use permission to use.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
	<uses-sdk android:minSdkVersion="15" />
	<application android:label="MapExample1">
		<meta-data android:name="com.google.android.geo.API_KEY" android:value="{Go to your google API to get a key and replace here.}" />
	</application>
	<!-- Google Maps for Android v2 requires OpenGL ES v2 -->
	<uses-feature android:glEsVersion="0x00020000" android:required="true" />
	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
	<uses-permission android:name="android.permission.ACCESS_FINE_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" />
	<uses-permission android:name="android.permission.INTERNET" />
	<!-- Google Maps for Android v2 will cache map tiles on external storage -->
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
	<!-- Allow the application to access Google web-based services. -->
	<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
</manifest>

That's it, all the code to run google map on Xamarin.