In a previous article, I talked about how to set a pickup location with a marker. This time will add some styling to the map so that it doesn’t look like the default Google Maps styling.

This article is based on the official Google Maps documentation, so if you want to know more information about this, you can take a look here.

After applying the style to our map the result will look like this:

Let’s code

1-Define your style 

Let’s start by defining our style file. There are different tools that make it easier:

• Google map style: This tool is recommended by Google and here you can import styles and create a new one based on that or from scratch.
• Snazzmap: This tool has a lot of pre-defined map styles, you can take one and modify it as you prefer

When finishing with our style we can generate our style JSON file.

2-Import the style file to your common project

Now let’s copy the style generated file to our shared project and make sure that the file build action is set to EmbeddedResource.

You can copy the MapStyle.json file here.

3-Apply the style

Since we are using Xamarin.Forms.GoogleMaps library it already has support for applying styles to Google Maps. So the last step is to add the style by using the MapStyle property of the map and load our JSON file there.

You can check the full source code here.

That’s it!

References

https://developers.google.com/maps/documentation/javascript/styling

https://mapstyle.withgoogle.com/

https://github.com/amay077/Xamarin.Forms.GoogleMaps

Happy styling!