Post
Ask Question

Getting Started With Google And Bing Maps Using Xamarin.Forms

Introduction

Xamarin allows us to integrate maps in all the mobile Applications. Google and Bing Maps combine the power of Xamarin Maps. You can show any location and show different routes on the map etc. You can refer to the image given below to quickly learn about map implementation, using Xamarin.forms. In this article, I have shared every detail about Xamarin.Forms Maps implementation .


Step 1

Setup new Xamarin.Forms Application

Let's start with creating a new Xamarin.Forms project in Visual Studio.

Open Run > Type Devenev.Exe and press Enter > New Project (Ctrl+Shift+N) -> select Portable Blank Xaml app.


It will automatically create multiple projects like Portable, Android, iOS, UWP. You can refer to my previous article for more.

Note

UWP is available in Xamarin.Forms 2.1 and above; and Xamarin.Forms.Maps is supported in Xamarin.Forms 2.2 and above, so make sure to update the Xamarin.Forms NuGet package

Step 2 

Install Xamarin.Forms.Maps NuGet Package

Xamarin.Forms.Maps is a cross-platform NuGet package for native Map APIs on each platform. Map control Android will support Google Maps, Windows and UWP apps will support Bing Maps.

Right click on Solution > Select “Manage nuget package for project solution “ > Select Xamain.Forms.Maps > Select all the Projects > Click on "Install".


Step 3

Add Maps control in Portable library

You can have a common design for all the platforms from portal library.

  1. Add Xamarin.Forms.Maps namespace from MainPage.xaml.
    1. xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"  
  2. Add customized UI map UI Design, as shown below, and if you want to show the user; current add IsShowingUser="True" property from map control, proceed, as shown below.
    1. <?xml version="1.0" encoding="utf-8" ?>  
    2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
    3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
    4.              xmlns:local="clr-namespace:DevEnvExeMyLocation"  
    5.               xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"  
    6.              x:Class="DevEnvExeMyLocation.MainPage">  
    7.     
    8. <StackLayout VerticalOptions="StartAndExpand" Padding="30">  
    9.     <maps:Map WidthRequest="960" HeightRequest="700"  
    10.         x:Name="MyMap"  
    11.         IsShowingUser="True"  
    12.         MapType="Street"  
    13.         />  
    14.   </StackLayout>  
    15.   
    16. </ContentPage>  
  3. You can add the code given below for zoom and center the user position from MainPage.cs file.
    1. using Xamarin.Forms;  
    2. using Xamarin.Forms.Maps;  
    3.   
    4. namespace DevEnvExeMyLocation  
    5. {  
    6.     public partial class MainPage : ContentPage  
    7.     {  
    8.         public MainPage()  
    9.         {  
    10.             InitializeComponent();  
    11.             MyMap.MoveToRegion(  
    12.     MapSpan.FromCenterAndRadius(  
    13.         new Position(37, -122), Distance.FromMiles(1)));  
    14.         }  
    15.     }  
    16. }  
Step 4
 
Generate Google Maps API key

Android allows us to integrate Google Maps in our applications, so we need to generate an API key, using Google Developer account. This article shows you how to generate Google Maps API key from Google Developer account.

Refer my previous article Generate Google Map API Key.

Step 5

Generate Bing Maps Application key

Windows allows us to integrate Bing Maps in our Application, so we need to generate an Application key, using Bing Developer account. This article shows you how to generate Bing Maps Application key from Bing Developer account.

Refer to my previous article, Generate Bing Maps API Key.

Step 6

Update info.plist file from iOS Project

In the beginning of iOS 8, we need to add two keys given below from info.plist file.

  1. <key>NSLocationAlwaysUsageDescription</key>  
  2.     <string>Can we use your location</string>  
  3. <key>NSLocationWhenInUseUsageDescription</key>  
  4.     <string>We are using your location</string>  
Step 7
 
Xamarin.Forms Map initialization

Xamarin.Forms and Xamarin.Forms.Maps are two different NuGet packages that have been added to all the projects. While creating Xamarin.Forms project, automatically Xamarin.Forms NuGet package was added and initialization code was added to all the projects.

We recently added new Xamarin.forms.maps NuGet to our project, so we are required to add initialization. Afterwards, Xamarin.Forms.Forms.Init method is being called.

iOS

Go to iOS project > open AppDelegate.cs file. In the FinishedLaunching method, go to GlobalXamarin.Forms.Forms.Init(); > Add the line of code given below.

  1. Xamarin.FormsMaps.Init();  
Android

Go to Android project > open MainActivity.cs file. In the OnCreate method, after globalXamarin.Forms.Forms.Init(this, bundle);  add the code given below.

  1. Xamarin.FormsMaps.Init(this, bundle);  
I believe you already generated Google API key and added the below key from Property/ AndroidManifest.xml under Application tag.
  1. <meta-data android:name="com.google.android.geo.API_KEY "android:value="Add API Key – Refer Step 4" />  
Windows (WinRT, Windows Phone, UWP)

Go to Windows project > open MainPage.xaml.cs file. In the MainPage constructor, after LoadApplication() method, add the below line of code.

  1. Xamarin.FormsMaps.Init("INSERT_AUTHENTICATION_TOKEN_HERE -refer step 5");  
Step 9
 
Enable Required Permissions

You'll also need to enable appropriate permissions on Android and Windows project.

Android

Right-click on an Android project and select Property > Android Manifest > Enable the location specified permissions on Android.


Windows Project

Open the Windows Package.appxmanifest file > Capabilities > Enable the location specified permissions i.e. all Windows project.

Step 10

Location Privacy Setting on device

Before debugging and running an application, you need to enable Location on all the devices (iOS, Android, Windows).


Step 11

Installing Google Play Services from Android Emulator

Xamarin.Forms 2.2.0 on Android now depends on GooglePlayServices 29.0.0.1 for Maps.


Visual Studio Emulator for Android does not include Google Play Services. This means that several APIs that include support for Google Maps are not supported by default. To install Google Play Services, follow the steps given below.

  1. Download the Google Apps package from Team Android.
  2. Verify Device Android Version like GApps CyanogenMod 11 / Android 4.4 KitKat and download.
  3. Drag and drop the downloaded .zip package into the running Android Emulator and wait for the installation to complete.



  4. The Emulator will shut down and restart. To verify the installation, check Play Store app, Gmail etc. is visible in the app menu or not.
  5. Now, you can start using Android Emulator.

Run an Application

After completing all the steps given above, you can start to run all the platform apps.






Issues and Resolutions

I have shared some implementation, development issues and solution given below.


Error

Building an Android Java Out of Memory Error.

Solution

Go to Android project options and set Build/Android Build > Advanced tab > set 1G (or something) in Java heap size.

If you have any question /feedback /issue, write in the comment box.


Similar Articles