How to change the marker icon when selecting a marker in the .NET MAUI Maps?

In the Syncfusion® .NET MAUI Maps control, you can change the marker icon upon selection using the MarkerSelected event of the MapTileLayer. Follow the steps below to implement this functionality.

Step 1: Add the SfMaps control in your layout and set the URL to the UrlTemplate property of the MapTileLayer as shown in the following code sample.

XAML:

<map:SfMaps>
   <map:SfMaps.Layer>
   	<map:MapTileLayer x:Name="tileLayer"
   	                  UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png">
   	</map:MapTileLayer>
   </map:SfMaps.Layer>
</map:SfMaps> 

Step 2: Add Markers to the MapTileLayer as shown in the following code sample.

XAML:

<map:MapTileLayer.Markers>
   <map:MapMarkerCollection>
   	<map:MapMarker IconType="Diamond"
                       IconFill="Red"
                       IconWidth="13"
                       IconHeight="13"
                       Latitude="40"
                       Longitude="-101" />
   	<map:MapMarker IconType="Diamond"
                       IconFill="Red"
                       IconWidth="13"
                       IconHeight="13"
                       Latitude="-15.7833"
                       Longitude="-52" />
   	<map:MapMarker IconType="Diamond"
                       IconFill="Red"
                       IconWidth="13"
                       IconHeight="13"
                       Latitude="-1.6"
                       Longitude="24.4" />
   	<map:MapMarker IconType="Diamond"
                       IconFill="Red"
                       IconWidth="13"
                       IconHeight="13"
                       Latitude="49.9"
                       Longitude="72.23" />
   	<map:MapMarker IconType="Diamond"
   	               IconFill="Red"
   	               IconWidth="13"
   	               IconHeight="13"
   	               Latitude="-20.54"
   	               Longitude="134.10" />
   </map:MapMarkerCollection>
</map:MapTileLayer.Markers> 

Step 3: Using the MarkerSelected event, change the SelectedMarker’s IconType and IconFill as shown in the following code sample.```

XAML:

<map:MapTileLayer x:Name="tileLayer"
                  UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
                  MarkerSelected="MapTileLayer_MarkerSelected">
</map:MapTileLayer> 

C#:

private void MapTileLayer_MarkerSelected(object sender, Syncfusion.Maui.Maps.MarkerSelectedEventArgs e)
{
   e.SelectedMarker.IconType = Syncfusion.Maui.Maps.MapIconType.Triangle;
   e.SelectedMarker.IconFill = Colors.Blue;
} 

Output:

Conclusion:
I hope you enjoyed learning how to change the marker icon when selecting a marker in the .NET MAUI Maps (SfMaps).

Refer to our .NET MAUI Maps feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Maps documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Maps and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!