We need to open the detailed popup when clicked on any marker on the maps.

[Ankita Mittal]

Hello,

I need th fucntonailty where in as soon as i click on the marker its details with some action buttons opened in the form of popup or side tab above the map as a layer.

[Sridevi Sivakumar]

Hi Ankita Mittal,

Greetings from Syncfusion.

We have checked the reported query and we have achieved it by using TooltipTemplate  Marker’s TooltipSettings  as per the below code snippet.

Code snippet[XAML]: 

                 <maps:MapMarkerSetting.TooltipSettings> 

                      <maps:TooltipSetting ShowTooltip="True" ValuePath="Label" > 

                         <maps:TooltipSetting.TooltipTemplate> 

                              <DataTemplate> 

                                  <StackLayout BackgroundColor="Aqua" HeightRequest="60" WidthRequest="50" > 

                                          <Label Text="{Binding Label}"  /> 

                                        <Button Text="OK" Margin="2" BackgroundColor="LightGray"/> 

                                  </StackLayout> 

                        </DataTemplate> 

               </maps:TooltipSetting.TooltipTemplate> 

              </maps:TooltipSetting> 

        </maps:MapMarkerSetting.TooltipSettings> 

Please have a sample from the below link
https://www.syncfusion.com/downloads/support/forum/162341/ze/MapSample121359866

Let us know if you need any further assistance.

Regards,
Sridevi S.  

 

[Ankita Mittal]

Hi Sridevi S.  

Thanks for the update.

But as i see this a very small popup saying OK button on it.

My requirement is to see the details of that particular marker on a big sized popup along with some other buttons i can give on that popup.

Thanks,

Ankita

[Sridevi Sivakumar]

Hi Ankita Mittal,

Thanks for your update.

We would like to inform you that, you can customize the tooltip height and width of by changing the layout size in template as like a below code snippet.

Code snippet[XAML]:  

        <maps:TooltipSetting ShowTooltip="True"   BackgroundColor="Aqua" StrokeColor="Black" StrokeWidth="1" Duration="1000"> 

             <maps:TooltipSetting.TooltipTemplate> 

                <DataTemplate> 

                 <StackLayout HeightRequest="70" WidthRequest="130" > 

                      <Label Text="{Binding Country}"  HeightRequest="30" VerticalOptions="Start" FontSize="20" HorizontalTextAlignment="Center"  /> 

                        <Grid > 

                         <Grid.ColumnDefinitions> 

                          <ColumnDefinition Width="*"/> 

                          <ColumnDefinition Width="*"/> 

                            </Grid.ColumnDefinitions> 

                             <Button Text="Ok" Margin="2" BackgroundColor="LightGray"/> 

                            <Button Text="Cancel" Margin="2" Grid.Column="1" BackgroundColor="LightGray"/> 

                         </Grid> 

                    </StackLayout> 

             </DataTemplate> 

       </maps:TooltipSetting.TooltipTemplate> 

In the below code snippet, we have added one more button for your reference.

If you want to change the tooltip show duration value, then use Duration property of TooltipSetting. 

For more information about tooltip customization 

https://help.syncfusion.com/xamarin/maps/tooltip#tooltip-customization

Screenshot: 

Please a modified sample from the below link 

https://www.syncfusion.com/downloads/support/forum/162341/ze/Map_Sample564671812

Additionally, You can add any other popup layout when clicking on marker by using the MarkerSelected Event. Here you can get notification when the marker is clicked and you can add popup layout based on it.

https://help.syncfusion.com/xamarin/maps/markers#events

Regards,
Sridevi S.