Mosses
 · [moe-zus]

How to get current Google Map zoom level

Custom Code

I'm attempting to get the current zoom level of Google Map and update respective page state. Tried both as Custom Function and Action, with the help of Code Copilot and chatGPT, but kept running into code errors. Searched the web, but can't seem to find anyone who has publicly shared managing zoom levels. Any guidance is appreciated.

Basically, I'm trying to figure out what's the approximate visible mileage across the screen view width of a device based on the zoom level.

Here's my attempt as Custom Function:

import 'dart:convert';
import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:intl/intl.dart';
import 'package:timeago/timeago.dart' as timeago;
import '/flutter_flow/lat_lng.dart';
import '/flutter_flow/place.dart';
import '/flutter_flow/uploaded_file.dart';
import '/flutter_flow/custom_functions.dart';
import '/backend/backend.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import '/backend/schema/enums/enums.dart';
import '/auth/firebase_auth/auth_util.dart';

double screenWidthMilesPerZoomLevel(double zoomLevel) {
  /// MODIFY CODE ONLY BELOW THIS LINE

  // based on zoomlevel argument for google map and screen width of device, return number of miles visible on the map width wise
  // Constants for map calculations
  const double earthRadius = 3963.2; // in miles
  const double mapWidthInPixels = 256.0;
  const double zoomMax = 21.0;

  // Calculate the miles visible on the map width wise
  double milesPerPixel =
      (earthRadius * 2 * math.pi) / (mapWidthInPixels * math.pow(2, zoomLevel));
  double screenWidthMiles = milesPerPixel * mapWidthInPixels;

  return screenWidthMiles;

  /// MODIFY CODE ONLY ABOVE THIS LINE
}

And as Custom Action:

import 'package:google_maps_flutter/google_maps_flutter.dart';

Future<double> currentZoomLevel(GoogleMapController mapController) async {
  // Get the current camera position, which includes the zoom level
  CameraPosition cameraPosition = await mapController.getLatLngBounds();

  // Return the current zoom level
  return cameraPosition.zoom;
}
What have you tried so far?

Scoured the web.

Did you check FlutterFlow's Documentation for this topic?
Yes
1
1 reply