[Question] Zooming out until show marker | Disable Marker title.

[alejandrovgonzalez]

I'm submitting a ... (check one with "x")

• [x] question
• [ ] any problem or bug report
• [ ] feature request

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 3.8.0 "Google Maps SDK for iOS"
cordova-plugin-add-swift-support 2.0.2 "AddSwiftSupport"
cordova-plugin-advanced-http 2.4.1 "Advanced HTTP plugin"
cordova-plugin-androidx 2.0.0 "cordova-plugin-androidx"
cordova-plugin-androidx-adapter 1.1.1 "cordova-plugin-androidx-adapter"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-background-mode 0.7.3 "BackgroundMode"
cordova-plugin-buildinfo 4.0.0 "BuildInfo"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-fingerprint-aio 3.0.1 "FingerprintAllInOne"
cordova-plugin-firebasex 9.1.2-cli "Google Firebase Plugin"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-googlemaps 2.7.1 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-secure-storage 3.0.2 "SecureStorage"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-support-android-plugin 1.0.2 "cordova-support-android-plugin"
cordova-support-google-services 1.4.0 "cordova-support-google-services"
mx.ferreyra.callnumber 0.0.2 "Cordova Call Number Plugin"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "^5.17.1",
"@ionic-native/google-maps": "^5.5.0",

Questions Hello, first of all, thanks for this amazing plugin. I have a couple of questions that couldn't find or missed in the docs.

1. First, is there a way to 'zoom out' the map (without changing the center) until a certain marker appears in the camera's visible region?.
2. I was wondering if there is a way to prevent a Marker to show the Marker's title when getting clicked.

Thank you in advance for the help.

[wf9a5m75]

1. There is no a functional such like zooming out to see the certain marker without changing center. However there are some ideas.

(A) You can specify array of ILatLng to the target property of the map.animateCamera(), or

(B) you can zoom out with map.animateZoomOutCamera() and get the visible region through map.getVisibleRegion()

---

2. If you don't set title and snippet, marker does not show infowinfow.

[alejandrovgonzalez]

Regarding your idea A: The problem is that when giving an array of ILatLng the current camera center is lost. Regarding your idea B: It actually works, though it looks weird since if you need to zoom out more than 1 time it stops to zoom out again.

I would guess the functionality would be something like Google Maps API fitBounds() method https://developers.google.com/maps/documentation/javascript/reference/map#Map.fitBounds.

If I manage to find a way to do it I will share it here.

[wf9a5m75]

This plugin provides fitBounds as Array of ILatLng. In side the plugin, calculates the bounds, then fit the camera to the bounds.

You need to include proper points.

Or you can also pass northWest/southEast pairs based on your pre calculated bounds.

---

Just zooming out keeping map.animateZoomOutCamera() Inside the plugin, map.animateZoomOutCamera() is map.animateCamera()

Originally this plugin provides only two methods map.animateCamera() and map.moveCamera().

You can specify more exact parameters using map.animateCamera() method.

[wf9a5m75]

All source code is open :)

[alejandrovgonzalez]

After researching a bit and trying what you suggested (which didn't work for me) I ended up looking at some algorithm that would do the job. I increase the area usign this:

extendArea(
    northEast: LatLng,
    southWest: LatLng,
    increasePercentage: number
  ): { northEast: LatLng; southWest: LatLng } {
    let latAdjustment =
      (northEast.lat - southWest.lat) * (increasePercentage - 1);
    let lngAdjustment =
      (northEast.lng - southWest.lng) * (increasePercentage - 1);
    return {
      northEast: new LatLng(
        northEast.lat + latAdjustment,
        northEast.lng + lngAdjustment
      ),
      southWest: new LatLng(
        southWest.lat - latAdjustment,
        southWest.lng - lngAdjustment
      ),
    };
  }

and every time is increased I check if the coordinates of the POI I search for is inside the northEast/southWest area. The increasePercentage value can be for example 1.1 for a 10% area increase. When the POI fits the area, I just animate the camera to fit the northEast/southWest coordinates. The good thing about this method is that if the map is centered in the user and you use map.getVisibleRegion() to get the initial's area northEast/southWest, when you move the map to the newly found area the user will still be in the center.