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

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.

• How to Create Your First Xamarin.Form Application

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

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

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">
   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>
   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;
   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. }

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.