List of components

• Visual Studio (free)

Setting a pin on the Google Map an choose a starting point

Let’s start to put a few markers on the map. The code is pretty simple. In the “MainPage.xaml.cs” include the following using directive:

using Xamarin.Forms.GoogleMaps;

Then create a pin with position and label:

Pin one = new Pin ()
{
    Label = "Pin ONE",
    Position = new position (48.1390196, 11.5744422)
};
MyMap.Pins.Add (one);

“MyMap” is the name we have set in the “MainPage.xaml”.

The following code can be used to ensure that the map always opens at a specific starting point:

MyMap.MoveToRegion (MapSpan.FromCenterAndRadius (new Position (48.1390196, 11.5744422), Distance.FromKilometers (10)));

And this is how the app looks now:

Add new icons

I downloaded two alternative icons in order to replace the red Google standard pins. I have the “castle.png” and “beer.png” icon from the website icons8.com.

For iOS, we simply drag the two icons to the “Resources” folder in the iOS project. It should look like this:

For Android we drag the icons to the “drawable” folder under “Resources” in the Android project. For me it is unfortunately always the case that the “drawable” folder has to be created manually. Although, it is displayed normally in the Visual Studio folder structure, it actually doesn’t really exist if you search the folder on your computer. So create a new folder, where the really “drawable” folder should be and name it “drawable”. Restart Visual Studio and then add the two icons. It looks like this:

Extra step for Android users: Create a Bitmap class

iOS has a clear advantage here. You don’t have to do anything for Apple phones. iOS automatically renders the icons from the “Resources” folder. For Android, however, you have one extra step, but you are almost there.

Create a class in the ANDROID project, name it “BitmapConfig.cs” and copy the following code:

using DemoGoogleMapApp.Droid;
using Xamarin.Forms.GoogleMaps;
using Xamarin.Forms.GoogleMaps.Android.Factories;
using AndroidBitmapDescriptor = Android.Gms.Maps.Model.BitmapDescriptor;
using AndroidBitmapDescriptorFactory = Android.Gms.Maps.Model.BitmapDescriptorFactory;

public sealed class BitmapConfig : IBitmapDescriptorFactory
{
    public AndroidBitmapDescriptor ToNative(BitmapDescriptor descriptor)
    {
        int iconId = 0;
        switch (descriptor.Id)
        {
            case "castle":
                iconId = Resource.Drawable.castle;
                break;
            case "beer":
                iconId = Resource.Drawable.beer;
                break;
        }
        return AndroidBitmapDescriptorFactory.FromResource(iconId);
    }
}

You can create an extra case for each icon. We can then assign a case name to each pin on the map.

In the “MainActivity.cs” the Google Maps initialization also has to be changed a little bit. Add the following using directive and the new initialization code.

Using directive:

using Xamarin.Forms.GoogleMaps.Android

Initialization code:

var platformConfig = new PlatformConfig
{
    BitmapDescriptorFactory = new BitmapConfig()
};
Xamarin.FormsGoogleMaps.Init(this, savedInstanceState, platformConfig);

I got the idea for the “BitmapConfig.cs” from this post.

Last step: Add the custom icon pins in Google Maps app

From now on you can easily set the icon image for each pin on the Google Map:

Pin one = new Pin()
{
    Label="Pin ONE",
    Position= new Position(48.1390196, 11.5744422),
    Icon= BitmapDescriptorFactory.FromBundle("beer"),
    Type = PinType.Place
};

Each icon can be used as a Google Maps Pin with the following assignment:

Icon = BitmapDescriptorFactory.FromBundle ("NameOfTheCase")

Screenshots of the custom icon pins in Google Maps app

Download files

• Source Code Xamarin Forms Google Maps App with custom icon
• Icons
• BitmapConfig.cs AndroidManifest.xml MainActivity.cs

Please don’t forget to insert your Google Maps API Key in the source code.

The post How to add custom icon pins to Google Maps Xamarin App appeared first on Nerd Corner.

List of components

• Visual Studio (free)

Downloading the NuGet Package

Open Visual Studio and choose Mobile App (Xamarin.Forms). In order to use Google Maps, we have to integrate the corresponding NuGet package. Instead of the official version “Xamarin.Forms.Maps” by Microsoft, we use “Xamarin.Forms.GoogleMaps” by amay077. Please remember to install the NuGet package for each project. The “Xamarin.Forms.GoogleMaps” NuGet package by amay077 contains all functions of the official package and some additional ones. Among other things, you can easily replace the markers on the map with your own pictures.

All possible functions of the “Xamarin.Forms.GoogleMaps” NuGet package by amay077, to integrate Google Maps in an app, are described on GitHub: https://github.com/amay077/Xamarin.Forms.GoogleMaps

XAML code for the Google Map integration

Since the NuGet package is already installed, Google Maps can now be added to the XAML page. Open “MainPage.xaml” and add:

xmlns: gmaps = "clr-namespace: Xamarin.Forms.GoogleMaps; assembly = Xamarin.Forms.GoogleMaps"

Then we need the following XAML code to display the map:

    <Grid>
        <gmaps:Map x:Name="MyMap" MapType="Street" HasZoomEnabled="True" MyLocationEnabled="True" >
            <gmaps:Map.ItemTemplate>
                <DataTemplate>
                    <gmaps:Pin Icon="{Binding PinIcon}" Position="{Binding Position}"
                              Label="{Binding PinLabel}" />
                </DataTemplate>
            </gmaps:Map.ItemTemplate>
        </gmaps:Map>
    </Grid>

Get the Google API Key to integrate Google Maps in an app

Although we have the XAML code to integrate Google Maps in an app, an API key is required. Otherwise we won’t see anything. Obtaining the API key from Google is easy and quick.
Simply request the API key here: https://developers.google.com/maps/documentation/embed/get-api-key

Please note that the keys for iOS and Android are different.

Initialize Google Maps for Android

These are the final steps to display Google Maps in Android. Open the “MainActivity.cs” and add the following line in the “OnCreate ()” function:

Xamarin.FormsGoogleMaps.Init (this, savedInstanceState);

Next, go to “Properties” and select “AndroidManifest.xml”. We have to insert here the Google API key and grant the rights for GPS.

The is the place where you have to put the line with the meta-data for the Google Maps API Key:

<application android: label "Name of your app">Add here the meta-data</application>

This is the line with the meta-data for the Google Maps API Key:

<meta-data android: name = "com.google.android.maps.v2.API_KEY" android: value = "AddYourAndroidAPIKeyHere" />

Then the rights for the GPS have to be granted:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-feature android:name="android.hardware.location.gps" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION" />
<uses-permission android:name="android.permission.CONTROL_LOCATION_UPDATES" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

Afterwards the “AndroidManifest.xml” looks like the screenshot here:

Initialize Google Maps for iOS

The initialization is easier for iOS. You just have to open the “AppDelegate.cs” and add the following line:

Xamarin.FormsGoogleMaps.Init ("AddYouriOSAPIKeyHere");

Start the app

The app is now ready to go. Press compile in Visual Studio, then it looks like this:

It is normal that the app chooses Rome as starting point. The next post shows how you can implement the starting point of the Google Maps app.

Sometimes it happens that the app does not automatically ask for the required rights and therefore it closes immediately after launching. This can be avoided by simply allowing GPS access in the settings or implementing a command to ask for the required rights.

Download files

• Source Code Demo Google Maps App
• ActivityMain.cs AndroidManifest.xml MainPage.xaml MainPage.xaml.cs

Please don’t forget to insert your Google Maps API Key in the source code.

The post How to integrate Google Maps in an App with Xamarin appeared first on Nerd Corner.