Pin Coordinates To External Maps In Xamarin.Forms

Xamarin

In this tutorial, we will learn how to pin latitude and longitude coordinates in external maps in Xamarin.Forms. The coordinates are pinned with Google Maps in Android and Apple Maps in iOS.

External Maps Plugin

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

Platform Support

It provides support for Android and iOS Platforms.

Platform	Supported Version
Xamarin.iOS	iOS 7+
Xamarin.Android	API 10+

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 the location.

Step 1

Create a new project by selecting New - Project - Select Xamarin Cross-Platform App and click OK.

Xamarin

Then, select Android and iOS platforms as shown below with code sharing strategy as PCL or .NET Standard and click OK.

Xamarin

Step 2

We will start coding for External Maps. Create a 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.

Xamarin

Step 3

Open your XAML file and paste the following code. I have added a click event for the button to trigger or pin the specific co-ordinate to the 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:MapsPluginSample"
x:Class="MapsPluginSample.MainPage">
<Button Text="Pin Co-Ordinate"
Clicked="OnButtonClicked"
VerticalOptions="Center"
HorizontalOptions="Center" />
</ContentPage>

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

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

Add Pin to method to locate the 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 my location; 10.7653, 79.0687 is Latitude & Longitude of the location respectively; 8 is the zoom level of your application.

Demo

The following screenshots demonstrate how this plugin works. You can download the source code of this article and post your comments.

Android	iOS

Download Code

You can download the full source code from the top of the article.

2 Comments

Join the conversation! Your thoughts help the community grow.

engbeba gamal8y ago
Hello nice article but can`t navigate between user location and the pin location like if anyone send me location in whats app a line will be drawn to the road
- Kalle Petersson8y ago
  DId you ever solve that? I have the same issue. engbeba gamal