inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
272 stars 54 forks source link

Create bounds passed on flightPath #107

Closed dsumah closed 1 year ago

dsumah commented 1 year ago

Hi guys. How do I go about setting the correct bounds for my map? What I am trying to achieve is a situation where my polyline fits or almost fits the screen.

It wil be nice if someone can point to where the docs speaks about setting bounds

Capture d’écran 2022-10-27 à 12 25 29 AM
Mastersam07 commented 1 year ago

Not sure this is supported out of the box. You will have to use the native api to fit bounds. You could check the advanced usage section of the docs.

var bounds = new window.google.maps.LatLngBounds()
bounds.extend(pathA)
bounds.extend(pathB)
...
bounds.extend(pathN)

this.$mapRef.value.map.fitBounds(bounds)

in the above, mapRef is the reference to your google map(see advanced usage)

If you have a list of LatLng values, you could loop over and extend the bounds for each of the value in thelist.