CODEWITHSUNDEEP
c#google-mapsxamarin.forms
DarkW1nter
DarkW1nter

Reputation: 2861

Show a url on a custom maps pin in Xamarin Forms

In Xamarin Forms I'm using the google maps plugin to show certain locations. For the pin of each location I would like to show a url along with the label and address, so the user can click the url and open an info page.

I have created a custom pin to include the url, but I don't know how to show this on the pin.

Anyone know how to do this?

public partial class MapPage : ContentPage
    {
        public List<CustomPin> CustomPins { get; set; }

        public MapPage()
        {
            InitializeComponent();
            PlotPositions();
            MyMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(lat, long), Distance.FromMiles(1.0)));
        }

        public  void PlotPositions()
        {
            var myPos = new Position(lat, long);
            var pin = new CustomPin
            {
                Type = PinType.Place,
                Position = myPos,
                Label = "Glasgow City Centre",
                Address = "Argle Street, Glasgow",
                Url = "testUrl"
            };
            MyMap.Pins.Add(pin);
        }

        public class CustomPin : Pin
        {
            public string Id { get; set; }
            public string Url { get; set; }
        }

}

internal class CustomPin
    {
        public PinType Type { get; set; }
        public Position Position { get; set; }
        public string Label { get; set; }
        public string Url { get; set; }
    }

map page:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             x:Class="gl_mobile_app.Views.Map.MapPage">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="back" />
    </ContentPage.ToolbarItems>
    <ContentPage.Content>

        <Grid BackgroundColor="Gray">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Row="0" Padding="20,20,20,20">
                <maps:Map 
                x:Name="MyMap"
                IsShowingUser="True"
                MapType="Street"
            />
            </StackLayout>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Upvotes: 1

Views: 1303

Answers (1)

Dmitry Zinoviev
Dmitry Zinoviev

Reputation: 588

Could you prowide code of your renderers and MapPage layout

Or try to use this example https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/map/customized-pin.

If you want to improve Pin, you need to create map renderer in droid project.

In this renderer you need to override CreateMarker method.

    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);
        marker.SetIcon(BitmapDescriptorFactory.FromResource(Resource.Drawable.Pin));
        return marker;
    }

You will need also Pin image for this marker.

In link that I posted above you can see example of method CreateMarker

Upvotes: 1

Related Questions