[SOLVED] How to call map.fitBounds in akryum:vue-googlemaps

#1

I’m using using Akryum’s vue-googlemaps. I have 2 positions and I want to ensure that both are viewable on the map. I have a component function that takes the two positions and all I should have to do is call map.fitBounds. But I don’t know how to get the Google map API map object for a method. Neither this.map or this.$_map are defined.

I know that if the googlemaps-map HTML token has an event handler like @idle, that the event handler will be called with a map argument. Am I expected to store that myself or is there another way to get it?

#2

I think what you need to do is add a ref to the map component like <googlemaps-map ref="myMap">, and then call this.$refs.myMap.$_map or this.$refs.myMap.$_getMap()

($_getMap is a method which returns a promise that resolves to the map, so that you can rely on the map being initialized)

#3

Thanks, @herteby. this.$refs.mymap.$_getMap() works perfectly. But I don’t even need the map object since fitBounds() is callable from this.$refs.myMap.fitBounds(), assuming that the map is already initialized (which it is in my case since otherwise, the markers wouldn’t exist).

Also, note that $_getMap returns a promise, so you have to do something like this:

	this.$refs.map.$_getMap()
	.then ((map) => {
	    map.panTo(new google.maps.LatLng(33.03, -117.13));
	}, (error) => {
	    console.error("$_getMap failed:", error);
	});

or

    async myFunction() {
	    map = await this.$refs.map.$_getMap();
	    map.panTo(new google.maps.LatLng(33.03, -117.13));
    }