How to make custom info window in xamarin maps? - google-maps

Question

I want to create a custom info window in my Xamarin forms map,How can I implement this.I am using xamarin.forms.map map plugin to create map.
Please Help me
I want a custom info window like
this
i make custom map and custom pin
public class CustomMap : Map
{
public List<CustomPin> CustomPins { get; set; }
}
Custom Pin
public class CustomPin : Pin
{
public string ImageUrl { get; set; }
public float rating { get; set; }
}
Map page xaml.cs
public partial class MapPage : ContentPage
{
CustomPin pin;
MapVM MapVM;
public MapPage()
{
InitializeComponent();
pin = new CustomPin
{
Type = PinType.Place,
Position = new Position(37.79752, -122.40183),
Label = "Xamarin San Francisco Office",
Address = "394 Pacific Ave, San Francisco CA",
Url = "http://xamarin.com/about/",
rating = 3
};
var pin1 = new CustomPin
{
Type = PinType.Place,
Position = new Position(38.79752, -124.40183),
Label = "Xamarin San Francisco Office",
Address = "395 Pacific Ave, San Francisco CA",
Url = "http://xamarin.com/about/",
rating=2
};
customMap.CustomPins = new List<CustomPin> { pin, pin1 };
customMap.Pins.Add(pin);
customMap.Pins.Add(pin1);
customMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(37.79752, -122.40183), Distance.FromMiles(1.0)));
}
}
now i don't know about custom render class. please help me how i can define
custom render class and how i assign the image value and rating values to display in info window..
CustomRender.cs
[assembly: ExportRenderer(typeof(CustomMap), typeof(CustomMapRenderer))]
namespace CustomRenderer.Droid
{
public class CustomMapRenderer : MapRenderer, GoogleMap.IInfoWindowAdapter
{
List<CustomPin> customPins;
public CustomMapRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Map> e)
{
base.OnElementChanged(e);
if (e.OldElement != null)
{
NativeMap.InfoWindowClick -= OnInfoWindowClick;
}
if (e.NewElement != null)
{
var formsMap = (CustomMap)e.NewElement;
customPins = formsMap.CustomPins;
Control.GetMapAsync(this);
}
}
protected override void OnMapReady(GoogleMap map)
{
base.OnMapReady(map);
NativeMap.InfoWindowClick += OnInfoWindowClick;
NativeMap.SetInfoWindowAdapter(this);
}
protected override MarkerOptions CreateMarker(Pin pin)
{
var marker = new MarkerOptions();
marker.SetPosition(new LatLng(pin.Position.Latitude, pin.Position.Longitude));
marker.SetTitle(pin.Label);
marker.SetSnippet(pin.Address);
return marker;
}
public Android.Views.View GetInfoContents (Marker marker)
{
var inflater = Android.App.Application.Context.GetSystemService (Context.LayoutInflaterService) as Android.Views.LayoutInflater;
if (inflater != null) {
Android.Views.View view;
var customPin = GetCustomPin (marker);
if (customPin == null) {
throw new Exception ("Custom pin not found");
}
if (customPin.Id.ToString() == "Xamarin") {
view = inflater.Inflate (Resource.Layout.XamarinMapInfoWindow, null);
} else {
view = inflater.Inflate (Resource.Layout.MapInfoWindow, null);
}
var infoTitle = view.FindViewById<TextView> (Resource.Id.InfoWindowTitle);
var infoSubtitle = view.FindViewById<TextView(Resource.Id.InfoWindowSubtitle);
var imageView = view.FindViewById<ImageView>(Resource.Id.image);
var ratings = view.FindViewById<RatingBar>(Resource.Id.ratingbar);
//here how i set values for Image and Rating Cotrol
if (infoTitle != null) {
infoTitle.Text = marker.Title;
}
if (infoSubtitle != null) {
infoSubtitle.Text = marker.Snippet;
}
return view;
}
return null;
}
}
}

Answer 1

You can define a component that based on Xamarin.Forms component and you
can modify it like adding some bindable property,object etc. Also you can derive from a layout like stack , flow etc. instead of Xamarin.Forms component. Thus you can improve customizing level.
On Android side
[assembly: ExportRenderer(typeof(CustomEntry), typeof(AndroidCustomEntryRenderer))]
namespace MyProject.Droid.Renderer
{
public class AndroidCustomEntryRenderer : EntryRenderer
{
public AndroidCustomEntryRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.SetBackgroundColor(global::Android.Graphics.Color.White);
}
}
}
}
On PCL side
namespace MyProject.Views.ViewComponents
{
public class CustomEntry : Entry
{
}
}