Change the bounds format to follow google map

Currently, we update the map bounds on URL as below: https://map.treetracker.org/?userid=3350&bounds=-73.65242958068849,18.26000128888889,-73.52883338928224,18.291623758731028

https://www.google.com/maps/@22.38131,114.168639,11z

so the new URL should be:
https://map.treetracker.org/?userid=3350&bounds=22.38131,114.168639,11z

This brings two downsides:
1. The formated string is a bit long
2. The two corner points format need more calculation if the target screen is different, the google map format is more reasonable, by providing the zoom level and the center point.

---

Some hints:

- Please read our [readme](https://github.com/Greenstand/treetracker-web-map-client#treetracker-web) for more information/guide/tutorial.
- Here is [an engineering book](https://greenstand.gitbook.io/engineering/) in Greenstand.
- To know more about our organization, visit our [website](https://greenstand.org).
- If you want to join the slack community (some resources need the community member's permission), please leave your email address.
- More issues in this project: https://github.com/orgs/Greenstand/projects/26

Start with the project README, then trace the existing bounds URL handling from the map entry point. Compare the current corner-point format with the requested Google Maps-style center-and-zoom format, and verify that the resulting URL preserves the map view as described in the issue.

Written by the indexing model from the issue text.