How should I use the js code part "const bounds = new states.google.maps.LatLngBounds();" in this package ?

[deidei1231]

How should I use the js code part for exmaple "const bounds = new states.google.maps.LatLngBounds();" in this package ?
I need to specify boundaries so that the map automatically resizes appropriately.

[felixranesberger]

This should help you fix your issue :)

<script setup lang="ts">
import { GoogleMaps } from 'vue3-google-map'

const props = defineProps<{
  markers: {
    lat: number
    lng: number
  }[]
}>()

const mapInstance = ref<unknown | null>(null)

watch(() => mapInstance.value?.ready, (ready) => {
  if (!ready)
    return

  const bounds = new window.google.maps.LatLngBounds()
  props.markers.forEach((marker) => {
    bounds.extend(marker)
  })

  const padding = 150
  mapInstance.value.map.fitBounds(bounds, { top: padding, right: padding, bottom: padding, left: padding })
}, { immediate: true })
</script>

<template>
  <GoogleMap
      ref="mapInstance"
      api-key=""
  >
    ...
  </GoogleMap>
</template>

[deidei1231]

thranks