Visual Studio Xamarin Google Maps custom pin marker

How to add custom icon pins to Google Maps Xamarin App

We explained in the last post how to integrate Google Maps in a Xamarin Forms application. In this post we make a further step an show you how to change the standard Google Maps marker pin to custom icon pins in Google Maps.

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:

Screenshot Google Maps in App

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:

Add pictures to Xamarin Forms iOS project NErd Corner

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:

Visual Studio Xamarin how to integrate icons in the drawable folder Nerd Corner

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);
    }
}

Visual Studio Xamarin Bitmap Config for custom icon google maps pin Nerd Corner
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);

Bitmap Config for custom google pins in main activation function android Nerd Corner

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

Screenshot Xamarin Forms App with custom Google Maps Pin marker image Nerd Corner Screenshot Xamarin Forms App with custom Google Maps Pin marker image Nerd Corner Screenshot Xamarin Forms App with custom Google Maps Pin marker image Nerd Corner Screenshot Xamarin Forms App with custom Google Maps Pin marker image Nerd Corner

Download files

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

 

One thought on “How to add custom icon pins to Google Maps Xamarin App

Leave a Reply

Your email address will not be published. Required fields are marked *