Pin Coordinates To External Maps In Xamarin.Forms

In this tutorial, we will learn how to pin Latitude and Longitude or Co-Ordinates in External maps in Xamarin.Forms. The Co-Ordinates are pinned with Google Maps in Android and Apple Maps in iOS. 

External Maps Plugin: 

This plugin is used to pin specific geo-location and Navigating user from current location to that specified location. James Montemongo had written a plugin to navigate users. But this plugin doesn’t have functionality to pin the specified location. So I have rewritten the plugin and you can find the plugin from GitHub and Nuget. 

Platform Support: 

It has the support for Android and iOS Platforms. 

• Xamarin.iOS - iOS 7+ 
• Xamarin.Android - API 10+ 

Coding Part: 

Steps: 

I have split this part into 3 steps as in the following. 

Step 1: Creating new Xamarin.Forms Projects. 

Step 2: Setting up the plugin for Xamarin.Forms Application. 

Step 3: Implementing the functionality to pin location.

Step 1

Create New Project by Selecting New -> Project -> Select Xamarin Cross Platform App and Click OK.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2

We will start coding for External Maps. Create New Xamarin Forms Project. Open Nuget Package Manager against the solution and do search for External Maps Plugin or Paste the following Nuget Installation.

Install-Package ExternalMapsPlugin -Version 1.0.0

Add this Plugin against Android & iOS Platforms.

Step 3

Open your XAML file and paste the following code. I have added a clicked event for the button to trigger or pin the specific co-ordinate to the map.

<code class="xml language-xml"><?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:MapsPluginSample"
             x:Class="MapsPluginSample.MainPage">

 <Button Text="Pin Co-Ordinate" 
            Clicked="OnButtonClicked"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

</ContentPage>

Open your MainPage.xaml.cs and add button click as shown below.

private void OnButtonClicked(object sender, EventArgs e)
{
 
}

Add Pinto method to locate co-ordinates in External Maps.

private void OnButtonClicked(object sender, EventArgs e)
{
       CrossMapsPlugin.Current.PinTo("Vannarapettai", 10.7653, 79.0687, 8);
}

Here, Vannarapettai is the label for your location 10.7653, 79.0687 is Latitude & Longitude of the location respectively. 8 is the zoom level of your Application.

Demo

The Following screenshots demonstrates how this plugin works. You can download the source code of this article and post your comments about this article and Plugin.

Android	iOS

Download Code

You can download the full source code of the article in GitHub. If you like this article, do star the repo in GitHub. Hit like the article.