Skip to content

Instantly share code, notes, and snippets.

@codercampos
Last active June 8, 2020 01:43
Show Gist options
  • Save codercampos/eb74bd64d45ea85030f946ad7f51c94a to your computer and use it in GitHub Desktop.
Save codercampos/eb74bd64d45ea85030f946ad7f51c94a to your computer and use it in GitHub Desktop.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="{Binding Title}"
xmlns:converters="clr-namespace:MyApp.Converters"
xmlns:google="clr-namespace:Xamarin.Forms.GoogleMaps;assembly=Xamarin.Forms.GoogleMaps"
x:Class="MyApp.Views.MapPage">
<ContentPage.Resources>
<ResourceDictionary>
<converters:PinImageConverter x:Key="PinImageConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<google:Map HasZoomEnabled="True" ItemsSource="{Binding Pins}" IsShowingUser="{Binding ShowUser}" VerticalOptions="FillAndExpand" Grid.Row="0" Grid.Column="0">
<google:Map.ItemTemplate>
<DataTemplate>
<google:Pin Position="{Binding Position}"
Address="{Binding FullAddress}"
Label="{Binding Name}"
BindingContext="{Binding}"
Icon="{Binding Icon, Converter={StaticResource PinImageConverter}}"/>
</DataTemplate>
</google:Map.ItemTemplate>
</google:Map>
</ContentPage.Content>
</ContentPage>
using System;
using System.Globalization;
using Xamarin.Forms;
using Xamarin.Forms.GoogleMaps;
namespace MyApp.Converters
{
public class PinImageConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is string pinResource)
{
return BitmapDescriptorFactory.FromBundle(pinResource);
}
return BitmapDescriptorFactory.DefaultMarker(Color.Red);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return null;
}
}
}
@codercampos
Copy link
Author

codercampos commented Jun 8, 2020

MapPage
To use the Map with DataTemplate (like the ListView) You Can define it inside the ItemTemplate property. Then create the DataTemplate (which should be a Pin object) and define Position, Address, Label. This pins are created based on the ItemsSource which should be a IList object (this can be set in your ViewModel).

For the Icon property, I created a PinImageConverter: By default, You can't directly set a string of your Icon because It should be a Bitmap (or something like that) (Aymay's Google Maps implementation is not XAML friendly completely at the time of this writting... but He has done an excellent job tho). The converter recieves a string which will take from the OS bundle your icon resource and use BitmapDescriptorFactory (which comes in the Xamarin.Forms.GoogleMaps).

Note
At this point, I haven't try again to set the icon directly without using a converter. I will check Aymay's repo an update this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment