Using custom markers and Latitude Longitude bounds in Google Maps on Xamarin Forms
February 13, 2019
So there will be two features I am going to cover
- How you can set custom marker images in the map view.
- How you can set a latitude longitude bound to the map view.
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.
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.
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
Hence let’s go ahead and get
Once you have received the API keys, you need to add them to individual platform projects.
Step 3For 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" />
Now time to initialize the Map, so add the below line immediately after Xamarin Forms initialization.
For Android it should go into the
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
Xamarin.FormsGoogleMaps.Init("Your api key");
Now if you run the iOS project, you will be able to see this
Now that we have loaded the map, it’s time to add some markers.
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
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.
Create a file
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
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
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
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.
Thanks for reading, hope it helps you.