MAUI is still in Preview. That means it has a relatively small feature set and some of it doesn’t work as you’d expect. The fun part is figuring out how to make it work.
We wanted to implement an interactive map in a portion of our app. Seems like MAUI doesn’t support a solution for it yet. Whoops. Xamarin.Forms, the predecessor of MAUI, does support it but it hasn’t been ported to MAUI yet. So what do you do?
Here’s what we did:
- Create a React project
- Implement a React Component that shows Google Maps
- Pass in location data to create pins
- Host the app as a separate web app on a website (https://sosmap.vercel.app)
- Show that React app as a “WebView” inside the MAUI app
- A webview is a webpage hosted inside your app
Suddenly you have an interactive map in your application.
This isn’t the way MAUI is supposed to work, but a hack while it is in preview!
Also, the React app is hosted with CI/CD for a proper agile workflow.