map initial zoon too zoomed

Question

Probably this is a very stupid question, but if my app has a map, how can I make it appear zoomed out?

for example, when my app, it looks like this

Maui (default location)

but I want to appear like this

Where Ican see everything

this is my map

  <ContentPage.Behaviors>
      <mct:EventToCommandBehavior Command="{Binding AppearingCommand}"
                                  CommandParameter="{Binding Source={x:Reference ChargingStationMap}}"
                                  EventName="Appearing" />

  </ContentPage.Behaviors>


  <maps:Map x:Name="ChargingStationMap" ItemsSource="{Binding Pins}">
      <maps:Map.ItemTemplate>
          <DataTemplate x:DataType="model:PinModel">
              <conntrols:CustomPin Address="{Binding Address}"
                                   Label="{Binding Label}"
                                   Location="{Binding Location}"
                                   MarkerClickedCommand="{Binding MarkerClickedCommand}" />
          </DataTemplate>
      </maps:Map.ItemTemplate>
  </maps:Map>

vm

        public ObservableCollection<PinModel>? Pins { get; set; }
        public ICommand? OnPinMarkerClickedCommand { get; }
        public MainPageViewModel() {
            OnPinMarkerClickedCommand = new Command<Pin>(OnPinMarkerClicked);
            Pins = TurbinesService.GetPins(OnPinMarkerClickedCommand);
        }
        [RelayCommand]
        void Appearing(object o) {
            var map = o as Microsoft.Maui.Controls.Maps.Map;
            if (map != null) {

// here is where I want to zoom out to see everything

            }
        }
        void OnPinMarkerClicked(Pin pin) {
            if (pin != null) {
                // Handle the pin click event
                Shell.Current.GoToAsync($"{nameof(TurbineDetailPage)}", new Dictionary<string, object> {
                    { "SelectedPin", pin }
                });
            };
        }
    }
}

Answer 1

Hello,

If you see the whole world in the google map. You can create a custom MapHandler in the Platform/Android folder. Then create a MapCallbackHandler to monitor the map ready status, then SetMaxZoomPreference to 1f(whole world), then set the two side points and MoveCamera like following code.

namespace MauiApp1.Platforms.Android
{
    internal class MyMapHandler: MapHandler
    {
        protected override void ConnectHandler(MapView platformView)
        {
            base.ConnectHandler(platformView);
            var mapReady = new MapCallbackHandler(this);
            PlatformView.GetMapAsync(mapReady);
        }
    }

class MapCallbackHandler : Java.Lang.Object, IOnMapReadyCallback
{
     private readonly IMapHandler mapHandler;
 
     public MapCallbackHandler(IMapHandler mapHandler)
     {
         this.mapHandler = mapHandler;
     }
 
     public void OnMapReady(GoogleMap googleMap)
     {
         googleMap.SetMaxZoomPreference(1f);
         var pointFrom = new LatLng(-65.0, -180.0); 
         var pointTo = new LatLng(80.0, 179.0);
         var mine = new LatLngBounds(pointFrom, pointTo);
         googleMap.MoveCamera(CameraUpdateFactory.NewLatLngZoom(mine.Center, 1f));
         mapHandler.UpdateValue(nameof(Microsoft.Maui.Maps.IMap.Pins));
     }
}
}

Then, please register this MyMapHandler in the MauiProgram.cs

builder.ConfigureMauiHandlers(handlers =>
            {
#if ANDROID
                handlers.AddHandler<Microsoft.Maui.Controls.Maps.Map, MauiApp1.Platforms.Android.MyMapHandler>();
#endif
            });

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.