Using custom markers and Latitude Longitude bounds in Google Maps on Xamarin Forms

February 13, 2019

In this article I am going to explain how to work your way around with Google maps in Xamarin Forms.

So there will be two features I am going to cover

  1. How you can set custom marker images in the map view.
  2. How you can set a latitude longitude bound to the map view.

Loading the map view

Step 1

Assuming you already have a Xamarin Forms project, the first step would be to add this awesome Xamarin.Forms.GoogleMaps nuget developed by amay077.
This nuget is inherited from the Xamarin.Forms.Maps nuget, so it has all the features which the official package provides, and has additional features.

Install this on all the projects, it will install few dependencies as well.

At any point of time if you get confused, you can take a look at the complete solution for this article on my GitHub.

Step 2

Next step is to add the google maps view to the XAML page.
In order to do that you have to import the google maps library in your XAML first.
Add the below line to the root tag of your XAML page.

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

Now you can go ahead and the map view like this in your XAML

As of now, we have just added the map view, but it will not populate the map. In order to render the map, we have to initialize the map framework, which anyway would require a google maps api key.
Hence let’s go ahead and get api keys from here.

Please note that you would need to get the api keys separately for Android and iOS


Once you have received the API keys, you need to add them to individual platform projects.

Step 3

For android

Open the file AndroidManifest.xml 
And add the following line inside the  application tag 
<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="Your api key" />

Step 4

Now time to initialize the Map, so add the below line immediately after Xamarin Forms initialization.

For Android it should go into the MainActivity.cs file

Xamarin.FormsGoogleMaps.Init(this, savedInstanceState);

Now if you run the Android project, you will be able to see a map being loaded.

For iOS
It’s pretty simple actually. Just add the below line immediately after
Xamarin Forms initialization, in the AppDelegate.cs file

Xamarin.FormsGoogleMaps.Init("Your api key");

Now if you run the iOS project, you will be able to see this


Adding Custom markers

Step 1

Now that we have loaded the map, it’s time to add some markers.
From the codebehind of our map page, we can access the map element with the name, and can add some markers to it.
So this is my code to add 2 markers

And here’s the outcome

Now our objective is to replace those red markers with images from
  Drawable   folder on Android and from
  Resources   folder from iOS. We are loading from these folder so that we can avail the auto resize depending on the screen resolution feature.

Step 2

In order to do that we need images, so go ahead and put your images in Resources/drawable folders in Android and Resources folder in iOS projects.

Step 3

Create a file called AccessNativeBitmapConfig.cs onto your
 Android   project. And replace the content of the file with this code

Now we need to modify our Google maps initialization like this

And now we need to modify our AddMarkers() method.

You can see that I have added two lines

Icon = BitmapDescriptorFactory.FromBundle("type1"),
Icon = BitmapDescriptorFactory.FromBundle("type2"),

Now if you run the app you will get visuals like this.

Nothing to do for iOS, it renders icon from Resources folder by default.
Also if you add any new image to the android project, you will have to add a new case for that image in the switch case block in AccessNativeBitmapConfig.cs


Adding Latitude Longitude bounds

Now sometime there can be scenarios, where you would need to incorporate a certain are of the map in your screen, but as screen-sizes differ a lot across devices, this becomes very hard to do. Even if you try adjusting the zoom level of the map, their is no surety that , it will work.
“Lat long bounds” to the rescue.
If we apply a bound, irrespective of the form factor, the concerned positron of the map will always be shown in your app.
So how can we add a lat long bound to our app now.
It’s actually pretty simple

Instead of mapView.MoveToRegion(MapSpan.FromCenterAndRadius(marker1.Position, Distance.FromMeters(1000)));

We will do

And that’s how we can have our goal achieved, by providing the southwest position and northeast position as bounds.


The complete solution for this is available at my GitHub, feel free to clone and play with it. Give it a star if you liked it.

Please feel free to leave any feedback and share this with your developer friends, I would highly appreciate that, and it would motive me a lot.

This article is Part of the Xamarin Month initiative. Make sure to check that out for other awesome content, related to Xamarin Development.

Thanks for reading, hope it helps you.

Liked this blog? Please spread the word.

Leave a Reply:

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