How to Install and Setup Maps and Geolocation to your Cross Platform Project

In you’re planning to implement geolocation and maps to your cross platform project, it is important that you install packages for maps and geolocation and then setup your project first in order to consume maps and geolocation integration properly. This simple blog post will help you how to install and configure your Android, IOS and UWP project.

Just to give you an idea

Each mobile platform has its own geolocation and map feature.

Android has Google Maps
IOS has Apple Maps
UWP or Universal Windows Platform has Bing Maps

These maps offer API feature wherein we can consume the information to different platforms and devices.

What do we need to do first?

It’s important to download and install the packages for maps and geolocation first that support xamarin forms.

Why we need to setup our projects?

Here are some of the important keys why we need to setup the project to check if the device has:

Internet connection.
Allow location.
Network connection.
Api map key.

Overview of what we’re going to create:

Target Output: “Cross Platform Project Ready to Consume Geolocation and Maps in Every Platform Project”

Aim: After you finish this simple steps, you are now ready to call the geolocation and maps in your xamarin forms project.

If you’re ready, let’s get started!

Installing Maps and Geolocation

1.0 Search and Install the Maps and Geolocation Package

1.1 Right click the “Solution” and choose “Manage NuGet Packages for Solution…”

1.2 Search for “Geolocator” and install the package to all project.

(Project Link)

1.3 Search for “Xamarin.Forms.Maps” and install the package to all project.

Setting Up the Environment

- For Android -

1.0 Generate Google Maps Api Key

1.1 Go to Google Cloud Console and login with your google account.

1.2 In the search box of your console, search “Google Maps Android API” and click it.

1.3 Click enable and it will redirect you to a new page.

1.4 Click the button “Create Credentials” on the upper right corner.

1.5 And simply click the button “What credentials do I need?” since the Google Maps Android API is already selected by default of the page.

1.6 After you finish clicking the button, you’ll get your generated API key.

1.7 Copy the generated api key.

Optional: If you want to restrict the use of your api key for specific device, you can choose the “Restrict Key.”

2.0 Pasting the Key inside the Android Project

2.1 Go to you android project.

2.2 Expand the Properties and look for AndroidManifest.xml.

2.3 Paste this code inside the “< application android:label=”YourProjectName.Android” >…</ application >”

1
2
3
<application android:label="YourProjectName.Android">
    <meta-data android:name="com.google.android.geo.API_KEY" android:value="PASTEYOURGENERATEDKEYHERE"/>
</application>

3.0 Checking things inside the Android Properties

3.1 Go to “Android Properties” and choose “Android Manifest”

Check the following:

ACCESS_COARSE_LOCATION
ACCESS_FINE_LOCATION
ACCESS_LOCATION_EXTRA_COMMANDS
ACCESS_MOCK_LOCATION
ACCESS_NETWORK_STATE
ACCESS_WIFI_STATE
INTERNET

3.2 Ctrl+S to save the changes.

4.0 Add code snippet inside the MainActivity.cs

4.1 Locate and open the MainActivity.cs file

4.2 Paste this above the “LoadApplication(new App());”

1
global::Xamarin.FormsMaps.Init(this, bundle);

Reminder: Running Google Maps in Android Emulator requires “Google Play Services.” Download Gapps Zip file here and drag-and-drop to your running android emulator.

- For IOS -

1.0 Updating the Info.plist

1.1 Go to iOS Project.

1.2 Locate the Info.plist and right click then choose “Open With”…

1.3 Choose editor type for xml.

1.4 Paste this code after the “< dict >”

1
2
3
4
<key>NSLocationAlwaysUsageDescription</key>
    <string>Can we use your location</string>
<key>NSLocationWhenInUseUsageDescription</key>
    <string>We are using your location</string>

1.4 Save the file.

2.0 Updating the AppDelegate.cs

2.1 Locate the file “AppDelegate.cs”

2.2 Paste this above LoadApplication(new App());

1
global::Xamarin.FormsMaps.Init();

2.3 Save the file.

- For UWP (Universal Windows Platform) -

1.0 Generate Bing Maps Api Key

1.1 Go to Bing Maps Portal and sign in with you microsoft account.

1.2 After you successfully log in, choose the “My account” -> “My Keys”

1.3 Click the “here” to create a new key

1.4 Input the application name

Make sure to choose “Universal Windows App” but you can choose different Application type depending on your needs.

1.5 And lastly, click the button “Create” to finish generating the key.

When you’re done, the details of your bing map api will be shown below.

2.0 Updating the MainPage.xaml.cs

2.1 Go to UWP project.

2.2 Paste this inside the constructor of MainPage.xaml.cs and after the “this.InitializeComponent();”

1
global::Xamarin.FormsMaps.Init("PASTEHERETHEAPIKEYYOUGENERATED");