js-api-loader
js-api-loader copied to clipboard
Uncaught TypeError: this.h.apply is not a function
On vue3 I have this error message in the console and I don't know how to solve it. The map works but the error persists.
`mounted() {
googleApiloader
.load()
.then(() => {
this.initMap();
})
.catch(() => {
console.warn("error loading google api");
});
}, methods: {
initMap() {
if (!this.map) {
this.map = googleMap.pureMap(this.$refs.map, {
center: this.fenway,
zoom: 13,
});
if (!this.streetView) {
this.streetView = googleMap.streetViewPanorama(this.$refs.mapImage, {
position: this.fenway,
pov: {
heading:
this.viewPov && this.viewPov.heading
? this.viewPov.heading
: 34,
pitch:
this.viewPov && this.viewPov.pitch ? this.viewPov.pitch : 10,
},
zoom: this.viewPov && this.viewPov.zoom ? this.viewPov.zoom : 0,
scrollwheel: false,
});
this.streetView.addListener(
"pov_changed",
(this.viewPov.heading = this.streetView.getPov().heading),
(this.viewPov.pitch = this.streetView.getPov().pitch),
(this.viewPov.zoom = this.streetView.getPov().zoom),
this.handlePovChange()
);
this.streetView.addListener("position_changed", () => {
const position = {
lat: this.streetView.getPosition().lat(),
lng: this.streetView.getPosition().lng(),
};
this.fenway = position;
this.handlePositionChange();
});
this.map.setStreetView(this.streetView);
}
// init marker
this.initMarker();
}
},`
Can you provide more information? For example, if you expand the error in console you may be able to figure out which line of code in your sample is triggering the error.
Also, these fixes on a similar Vue3 error may help. Specifically, initializing with new
and checking your types. https://github.com/googlemaps/js-api-loader/issues/611#issuecomment-1144106297
Hi, I found the issue. The solution to this was to remove this from my code for the moment :
this.streetView.addListener(
"pov_changed",
(this.viewPov.heading = this.streetView.getPov().heading),
(this.viewPov.pitch = this.streetView.getPov().pitch),
(this.viewPov.zoom = this.streetView.getPov().zoom),
this.handlePovChange()
);
this.streetView.addListener("position_changed", () => {
const position = {
lat: this.streetView.getPosition().lat(),
lng: this.streetView.getPosition().lng(),
};
this.fenway = position;
this.handlePositionChange();
});
I don't know why excactly but it has to be something around the pov functionality.