How do I access the google maps API within my component?

[rbeach]

right now I am setting an arbitrary center for my map in my component's setup function, like

  setup(props) {
    const myMapRef = ref();

    watch(myMapRef, googleMap => {
      if (googleMap) {
        googleMap.$mapPromise.then(map => {
          map.setCenter({ lat: 10, lng: 300 })
        })
      }
    });

    return {
      myMapRef
    }
  },

I would like to create a LatLngBounds object, pass it some location data that I am storing in props.locations, and then center the map based on those locations. Is there an easy way to access the google maps api from within this setup method?

[rbeach]

I was able to access it using window.google.maps, but wondering if there is a better or more appropriate way. Very new to vue. Thanks!

  setup(props) {
    const myMapRef = ref();

    watch(myMapRef, googleMap => {
      if (googleMap) {
        googleMap.$mapPromise.then(map => {
            let mapsApi = window.google.maps
            let bounds = new mapsApi.LatLngBounds();
            props.locations.forEach((location) => {
              let aLatLng = new mapsApi.LatLng(location.position.lat, location.position.lng)
              bounds.extend(aLatLng)
            });

          map.fitBounds(bounds)
        })
      }
    });

    return {
      myMapRef
    }
  },