How to Center/Set Zoom of Map to cover all markers visible on Xamarin.Forms?

I am setting multiple markers to My Map

I can set statically the zoom levels and the center

but what i want is To Center to all markers and zoom level to fill all visible markers

I can use the Gmaps.MoveToRegion method which receives a MapSpan. The thing is, I don't know how to calculate the MapSpan needed to show all the markers.

I'm using Xamarin.Forms.Maps and Xam.Plugin.MapExtend.Abstractions

Thanks in advance!

I solved the damn thing using an algorithm I found here: http://www.movable-type.co.uk/scripts/latlong.html

In Xamarin is smth like this:

var radioTierra = 6371000; //metros
        var latitud1Radianes = pos1.Latitude * (Math.PI / 180.0);
        var latitud2Radianes = pos2.Latitude * (Math.PI / 180.0);
        var longitud1Radianes = pos2.Longitude * (Math.PI / 180.0);
        var longitud2Radianes = pos2.Longitude * (Math.PI / 180.0);

        var deltaLatitud = (pos2.Latitude - pos1.Latitude) * (Math.PI / 180.0);
        var deltaLongitud = (pos2.Longitude - pos1.Longitude) * (Math.PI / 180.0);


        var sumando1 = Math.Sin(deltaLatitud / 2) * Math.Sin(deltaLatitud / 2);
        var sumando2 = Math.Cos(latitud1Radianes) * Math.Cos(latitud2Radianes) * Math.Sin(deltaLongitud / 2) * Math.Sin(deltaLongitud / 2);
        List<double> sumandos = new List<double>();
        sumandos.Add(sumando1);
        sumandos.Add(sumando2);
        var a = sumandos.Sum();
        var c = 2 * Math.Atan2(Math.Sqrt(a), Math.Sqrt(1 - a));

        var distance = radioTierra * c;

        /* Δφ es deltaLatitud
         * Δλ es deltaLongitud*/
        var Bx = Math.Cos(latitud2Radianes) * Math.Cos(deltaLongitud);
        var By = Math.Cos(latitud2Radianes) * Math.Sin(deltaLongitud);
        var φ3 = Math.Atan2(Math.Sin(latitud1Radianes) + Math.Sin(latitud2Radianes),
                            Math.Sqrt((Math.Cos(latitud1Radianes) + Bx) * (Math.Cos(latitud2Radianes) + Bx) + By * By));//Latitud del punto medio
        var λ3 = longitud1Radianes + Math.Atan2(By, Math.Cos(longitud1Radianes) + Bx);//Longitud del punto medio

        var centro = new Xamarin.Forms.Maps.Position(φ3, λ3);
        Distance distancia = new Xamarin.Forms.Maps.Distance(distance + 0.2);

        Gmaps.MoveToRegion(MapSpan.FromCenterAndRadius(centro, distancia));

c#, I solved the damn thing using an algorithm I found here: http://www.movable-type.​co.uk/scripts/latlong.html. In Xamarin is smth like this: var radioTierra  I am setting multiple markers to My Map. I can set statically the zoom levels and the center. but what i want is To Center to all markers and zoom level to fill all visible markers. I can use the Gmaps.MoveToRegion method which receives a MapSpan. The thing is, I don't know how to calculate the MapSpan needed to show all the markers.

First you need to add custom map render to your android project that will inherit MapRenderer, GoogleMap.IInfoWindowAdapter

    public class MyMapRenderer : MapRenderer, GoogleMap.IInfoWindowAdapter

I have added 2 private fields

    private GoogleMap _map;
    private LatLngBounds.Builder _builder;

In the constructor initialize your _builder:

    public MyMapRenderer(Context context) : base(context)
    {
        _builder = new LatLngBounds.Builder();
    }

When override OnMapReady method set GoogleMap property as this:

    protected override void OnMapReady(GoogleMap map)
    {
        base.OnMapReady(map);

        NativeMap.InfoWindowClick += OnInfoWindowClick;
        NativeMap.SetInfoWindowAdapter(this);
        if (_map == null)
        {
            _map = map;
        }
    }

And you need to override CreateMarker method so you can change your zoom level

    protected override MarkerOptions CreateMarker(Pin pin)
    {
        var p = (THHPin)pin;

        var marker = new MarkerOptions();
        LatLng position = new LatLng(pin.Position.Latitude, pin.Position.Longitude);
        marker.SetPosition(position);
        marker.SetTitle(pin.Label);
        marker.SetSnippet(pin.Address);

        _builder.Include(position);
        LatLngBounds bounds = _builder.Build();

        CameraUpdate cu = CameraUpdateFactory.NewLatLngBounds(bounds, 20);

        _map.MoveCamera(cu);
        return marker;
    }

How to Center/Set Zoom of Map to cover all markers visible , How to Center/Set Zoom of Map to cover all markers visible on Xamarin. to show all the markers. I'm using Xamarin.Forms.Maps and Xam.Plugin.MapExtend​. Google MAP API v3: Center & Zoom on displayed markers. Ask Question Asked 9 years, 11 months ago. Center/Set Zoom of Map to cover all visible Markers? 2.

I had success with the below c# code. Just record the position of each marker as a LatLng object.

locationManager = (LocationManager)GetSystemService(Context.LocationService);

Criteria criteria = new Criteria();

criteria.Accuracy = Accuracy.Fine;
criteria.PowerRequirement = Power.Low;

provider = locationManager.GetBestProvider(criteria, true);

location = locationManager.GetLastKnownLocation(provider);

marker1lat = location.Latitude;
marker1lng = location.Longitude;

marker2lat = location.Latitude;
marker2lng = location.Longitude;

LatLng marker1LatLng = new LatLng(marker1lat, marker1lng);
Latlng marker2LatLng = new LatLng(marker2lat, marker2lng);

LatLngBounds.Builder b = new LatLngBounds.Builder()
                    .Include(marker1LatLng)
                    .Include(marker2LatLng);

mMap.MoveCamera(CameraUpdateFactory.NewLatLngBounds(b.Build(), 120));

Xamarin Forms Map - C#, Xamarin Forms Map - C# - Determine the zoom level to cover all marker about lat​/lng However, I know how to get the center of my point, the POI (Point of Interest​), but I don't Position(lat, lng); } public class DataCalc { public Position Pos { get; set; } public private void coverAllMarkers() { LatLngBounds. Which works, however, I would need to set up the center of the map and zoom for the specific marker that is created by the function setUpMarker. I've tried inside the setUpMarker function to do this: fromMarker = new google.maps.Marker({ center: fromLatlng, zoom: 5, map: map, title: "Here" }); But it didn't help.

Auto-center and auto-zoom a Google Map (Example), After all markers have been added: map.fitBounds(bounds); # auto-zoom map.​panToBounds(bounds); # auto-center. That's it, cheers. Google Maps API v3 provides a LatLngBounds object to which you can add multiple LatLng objects. You can then pass this to Map.fitBounds() function as described here: Zoom-To-Fit All Markers, Polylines or Polygons on A Google Map - API v2; Zoom-to-Fit All Markers on Google Map v3; Partial Example

Camera and View | Maps SDK for iOS, The bearing, tilt, location and zoom level of the map can be controlled Changes to the camera will not make any changes to markers, polylines, or other The initial camera position is set when you create the GMSMapView object via its you may want to move the camera such that they are all visible on the screen. I'm using fitBounds() to set the zoom level on my map too include all the markers currently displayed. However, when I have only one marker visible, the zoom level is 100% ( which zoom level 20 I think). However, I don't want it to be that far zoomed in so the user can adjust the position of the marker without having to zoom out.

Using custom markers and Latitude Longitude bounds in Google , So there will be two features I am going to cover. How you can set custom marker images in the map view. This nuget is inherited from the Xamarin.Forms.Maps nuget, so it has all the features which the official package providers, and Even if you try adjusting the zoom level of the map, there is no surety that, it will work. javascript - Center/Set Zoom of Map to cover all visible Markers? I am setting multiple markers on my map and I can set statically the zoom levels and the center but what I want is, to cover all the markers and zoom as much as possible having all markets visible Av…

Comments
  • There is a function called map.fitBounds() that does what you describe for javascript API and android API. Here's a link for further explanation. Not sure how you would do it in Xamarin, but hope this is a good start.
  • Hi, I know it's an old post, but could you explain a bit your code please? :/
  • @Emixam23 It is explained here: movable-type.co.uk/scripts/latlong.html
  • This works for both iOS and Android? @Ljupcho Hristov
  • @KalleP yes this is in shared proj