Xamarin Forms Map and Finding Location

Nowadays, many applications use the ability to find a map or use a location. Almost every application has these. If you want to show a mapped display or you want to find the location of the user, this article will help you.

First we open our project. Shared or portable, you can make a choice according to your needs. I choose portable and create a project. Then I update the Xamarin.Forms package from Nuget packages as it is in every project. Later, I clean up the project and rebuild it later so that the old libraries are not wiped off. So I can take advantage of Xamarin.formson’s current state. Later, we install the Xamarin Forms Maps package from the Nuget packages. Then we’ll use Google Maps, so we need to get a key here. For this you have to go to adreess. If you have an account you will be redirected directly, but opening a new account will not take you much time. You can also open a new application and select an existing application from this screen. After this process, you will see such a key screen.

In this project we have seen the key in the Android section of the AndroidManifest.xml under the properties in the section of the need to allow both the need to put this key here.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:installLocation="auto">
	<uses-sdk android:minSdkVersion="15" />
	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
	<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
	<uses-permission android:name="android.permission.INTERNET" />
	<application android:label="MapEkleme.Android">
		<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="KoMa98t3j83ph-FLKesiIVXcJYg6K4" />
	</application>
</manifest>

Now that we’ve done all of this, it’s time to create our map page. I’m opening a class for this. To be a page of the class, we need to inherit from a pagan. We set this class to inherit from the ContentPage. When this class is first started, you need to create a map. We write a function for it. We get an object from the Map class in the function, from which we determine how the map will be shaped. We give you the ability to zoom in and out of the map and move it around. Once you have indicated how the map will be, you can create it on the map if you want to pin it on the map. We need to add the pins that we created on the map to the object we have created from the map class so that the pins appear on the map. When the harness is opened we have to open the area and adjust its distance.

If we want to have an event when the pines are clicked, we need to create a function for them. I did a message here when pine was clicked, but you can set different pages or what you want to do.

If you want to open the map according to the location of the users, you need to install a separate Nuget package for this. The name of this package is Xam.Plugin.Geolocator. Then, on the map page, we find the location coordinates and assign the position coordinates to the double variables. This completes our actions.

using Plugin.Geolocator;
using System;
using Xamarin.Forms;
using Xamarin.Forms.Maps;

namespace MapEkleme.Views
{
    public class MapPage : ContentPage
    {
        private double Latitude;
        private double Longitude;
        public MapPage()
        {
            GetLocation();
        }
        private async void GetLocation()
        {
            var locator = CrossGeolocator.Current;
            locator.DesiredAccuracy = 50;

            var position = await locator.GetPositionAsync();
            Latitude = position.Latitude;
            Longitude = position.Longitude;
            CreateMap();
        }
        void CreateMap()
        {
            Map currentMap = new Map
            {
                HasScrollEnabled = true,
                HasZoomEnabled = true,
                MapType=MapType.Street
            };
            Pin microsoftPin = new Pin
            {
                Type = PinType.Place,
                Address = "Microsoft Türkiye İstnabul",
                Label = "Microsoft Türkiye",
                Position = new Position(41.0707118, 29.01545114)
            };

            Pin haliSahaPin = new Pin
            {
                Type = PinType.SearchResult,
                BindingContext = "Saha",
                Label = "Halı Saha",
                Position = new Position()
            };

            currentMap.Pins.Add(microsoftPin);
            currentMap.Pins.Add(haliSahaPin);

            microsoftPin.Clicked += MicrosoftPin_Clicked;


            currentMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(Latitude, Longitude),Distance.FromKilometers(1)));

            Content = currentMap;
        }

        private void MicrosoftPin_Clicked(object sender, EventArgs e)
        {
            Pin selectedPin = (Pin)sender;
            DisplayAlert(selectedPin.Label, selectedPin.Address, "OK");

        }
    }
}

I can throw the project on github if you wish. If you have trouble, you can forward it by mail or comment.