js-api-loader icon indicating copy to clipboard operation
js-api-loader copied to clipboard

Uncaught TypeError: this.h.apply is not a function

Open RijaCloud opened this issue 2 years ago • 3 comments

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();
  }
},`

RijaCloud avatar Sep 22 '22 17:09 RijaCloud

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.

wangela avatar Sep 28 '22 01:09 wangela

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

wangela avatar Sep 28 '22 01:09 wangela

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.

RijaCloud avatar Dec 13 '22 06:12 RijaCloud