Google Maps Integration In Xamarin Forms

In this article, we will discuss how to integrate Google Maps in Xamarin Forms Projects. The steps are, as follows:

In Visual Studio, create a Xamarin Portable Project. Go to New Project -> Cross-Platform -> Blank App (Xamarin.Form.Portable).

Add NuGet package Xamarin.Forms.Maps for each project. You can do this by right clicking on Solution Explorer and clicking Manage NuGet Package for Solution.

In iOS project, double click the AppDelegate.cs file and Add Xamarin.FormsMaps.Init(); in FinishedLauching Function.

code

In Android project, double click the MainActivity.cs file and Xamarin.FormsMaps.Init(); in Oncreate Function.

code

In Windows Runtime Project and Universal Windows Platform(UWP) project, double click the MainPage.xaml.cs and add Xamarin.FormsMaps.Init("INSERT_AUTHENTICATION_TOKEN_HERE");. The Token is discussed in further Points.

In Android project, we need to create an API key. To create the API key, go to C:\Users\Admin\AppData\Local\Xamarin\Mono and then copy debug.keystore file.

Now, go to C:\Program Files\Java\jre1.8.0_73\bin and paste the copied debug.keystore file.

Open Command Prompt – go C:\Program Files\Java\jre1.8.0_73\bin and run the command:

keytool -list -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android
Command
Your SHA1 Key is created. Store the SHA1 key which is further required for creating the API Key.

Now, create project, as shown in the below screen shot, by going to the link as https://console.developers.google.com/ and signing in with your Google account.

 google account

Next, it's showing New Project popup window; here, give your Project Name to create a new project.

popup window

Then, go for Google APIs and select Google Maps Android API.

Google Maps Android API

Enable Google Android API.

Enable

After enabling Google API, go to Google API credentials page.

credentials

Then, select configure and select the value to Android in the dropdown.  Next, click What credentials do I need? button.

Configure

Windows is showing. Create as API Key to give your project a name and click Add Package name and fingerprint button. Then, give package name as google.maps.key. Now, copy and paste the SHA1 Key here.

Configure

Then, click Create API Key button. It returns APIs Page. It will be showing API key.

create API

Then, in this API, a key is added to the AndroidManifest.XML file of a Xamarin Android application. Add the following code, and give package name as google.maps.key in manifest file.

code

Now, You'll also need to enable appropriate permissions by right-clicking on the Android project and selecting Properties -> Android Manifest, as shown in the below screen.

Android Manifest

In Portable project, add page as “Mapspage.cs” and write the code, as given below.
  1. using System;  
  2. using Xamarin.Forms;  
  3. using Xamarin.Forms.Maps;  
  4. using System.Diagnostics;  
  5. namespace XamarinMapSample {  
  6.     public class MapPage: ContentPage {  
  7.         Map map;  
  8.         public MapPage() {  
  9.             map = new Map {  
  10.                 IsShowingUser = true,  
  11.                     HeightRequest = 100,  
  12.                     WidthRequest = 960,  
  13.                     VerticalOptions = LayoutOptions.FillAndExpand  
  14.             };  
  15.             // You can use MapSpan.FromCenterAndRadius   
  16.             map.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(37, -122), Distance.FromMiles(0.3)));  
  17.             // or create a new MapSpan object directly  
  18.             //map.MoveToRegion(new MapSpan(new Position(0, 0), 360, 360));  
  19.             // add the slider  
  20.             var slider = new Slider(1, 18, 1);  
  21.             slider.ValueChanged += (sender, e) => {  
  22.                 var zoomLevel = e.NewValue; // between 1 and 18  
  23.                 var latlongdegrees = 360 / (Math.Pow(2, zoomLevel));  
  24.                 Debug.WriteLine(zoomLevel + " -> " + latlongdegrees);  
  25.                 if (map.VisibleRegion != null) map.MoveToRegion(new MapSpan(map.VisibleRegion.Center, latlongdegrees, latlongdegrees));  
  26.             };  
  27.             // create map style buttons  
  28.             var street = new Button {  
  29.                 Text = "Street"  
  30.             };  
  31.             var hybrid = new Button {  
  32.                 Text = "Hybrid"  
  33.             };  
  34.             var satellite = new Button {  
  35.                 Text = "Satellite"  
  36.             };  
  37.             street.Clicked += HandleClicked;  
  38.             hybrid.Clicked += HandleClicked;  
  39.             satellite.Clicked += HandleClicked;  
  40.             var segments = new StackLayout {  
  41.                 Spacing = 30,  
  42.                     HorizontalOptions = LayoutOptions.CenterAndExpand,  
  43.                     Orientation = StackOrientation.Horizontal,  
  44.                     Children = {  
  45.                         street,  
  46.                         hybrid,  
  47.                         satellite  
  48.                     }  
  49.             };  
  50.             // put the page together  
  51.             var stack = new StackLayout {  
  52.                 Spacing = 0  
  53.             };  
  54.             stack.Children.Add(map);  
  55.             stack.Children.Add(slider);  
  56.             stack.Children.Add(segments);  
  57.             Content = stack;  
  58.             // for debugging output only  
  59.             map.PropertyChanged += (sender, e) => {  
  60.                 Debug.WriteLine(e.PropertyName + " just changed!");  
  61.                 if (e.PropertyName == "VisibleRegion" && map.VisibleRegion != null) CalculateBoundingCoordinates(map.VisibleRegion);  
  62.             };  
  63.         }  
  64.         void HandleClicked(object sender, EventArgs e) {  
  65.                 var b = sender as Button;  
  66.                 switch (b.Text) {  
  67.                     case "Street":  
  68.                         map.MapType = MapType.Street;  
  69.                         break;  
  70.                     case "Hybrid":  
  71.                         map.MapType = MapType.Hybrid;  
  72.                         break;  
  73.                     case "Satellite":  
  74.                         map.MapType = MapType.Satellite;  
  75.                         break;  
  76.                 }  
  77.             }  
  78.             /// <summary>  
  79.             /// In response to this forum question http://forums.xamarin.com/discussion/22493/maps-visibleregion-bounds  
  80.             /// Useful if you need to send the bounds to a web service or otherwise calculate what  
  81.             /// pins might need to be drawn inside the currently visible viewport.  
  82.             /// </summary>  
  83.         static void CalculateBoundingCoordinates(MapSpan region) {  
  84.             // WARNING: I haven't tested the correctness of this exhaustively!  
  85.             var center = region.Center;  
  86.             var halfheightDegrees = region.LatitudeDegrees / 2;  
  87.             var halfwidthDegrees = region.LongitudeDegrees / 2;  
  88.             var left = center.Longitude - halfwidthDegrees;  
  89.             var right = center.Longitude + halfwidthDegrees;  
  90.             var top = center.Latitude + halfheightDegrees;  
  91.             var bottom = center.Latitude - halfheightDegrees;  
  92.             // Adjust for Internation Date Line (+/- 180 degrees longitude)  
  93.             if (left < -180) left = 180 + (180 + left);  
  94.             if (right > 180) right = (right - 180) - 180;  
  95.             // I don't wrap around north or south; I don't think the map control allows this anyway  
  96.             Debug.WriteLine("Bounding box:");  
  97.             Debug.WriteLine(" " + top);  
  98.             Debug.WriteLine(" " + left + " " + right);  
  99.             Debug.WriteLine(" " + bottom);  
  100.         }  
  101.     }  
  102. }  
In App.cs file, change the code, as shown in the screenshot.

code

You can run the Android & iOS Project to check the output. 

 

Next Recommended Readings