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?
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)
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));
}