Map reorienting after load

[estenssoros]

First of all, thank you so much for making the community fork! I'm so glad someone has taken on this project. I'm not really a front-end dev, but happy to help contribute.

I'm having an issue using this in the Quasar Framework where my map is reorienting after mounting. I'm setting the heading and tilt in the component and I see the map initially render in the correct position then rotate back to a North heading with 0 tilt. Has anyone run into this issue or know what's going on?

Also, the rotate control isn't rendering. I wonder if that is related.

I also can't access the map via this.$refs.map. to try and setHeading on mounted.

I just subbed this code into the default Index.vue for quasar app to reproduce the issue.

Thank you for any help! I would really appreciate it

Index.vue

<template>
  <div>
    <GMapMap
      :center="center"
      :zoom="15"
      map-type-id="hybrid"
      style="
        width: 100%;
        height: 900px;
        max-width: none;
        margin: 10px;
        padding: 10px;
      "
      :heading="heading"
      :tilt="tilt"
      :options="{
        heading: 220,
        tilt: 53,
        zoomControl: true,
        scaleControl: false,
        streetViewControl: false,
        rotateControl: true,
        rotateControlOptions: {
          position: 'RIGHT_CENTER',
        },
        fullscreenControl: false,
      }"
      ref="map"
    ></GMapMap>
  </div>
</template>

<script>
import { defineComponent,ref } from "vue";
export default defineComponent({
  name: "PageIndex",
  setup() {
    const center = ref({ lat: 39.192407, lng: -106.870389 });
    const heading = ref(220);
    const tilt = ref(53);
    return {
      center,
      heading,
      tilt,
    };
  },
});

boot/google-maps.js

import { boot } from 'quasar/wrappers';
import VueGoogleMaps from 'vue-google-maps-community-fork'

export default boot(({ app }) => {
    app.use(VueGoogleMaps, {
        load: {
            key: 'redacted',
        },
    });
});

[NathanAP]

Hello! Thanks for the message and the report!

Do you see any error that might be occurring while you try rendering your map?

[estenssoros]

Hey! The console is quiet unless I add autobindAllEvents: true, in the initialization. Then I am seeing some warnings for heading changed and tilt changed. I'm pretty sure I'm not doing anything to call these events. What do you think?

[estenssoros]

I got it! It looks like tilt and orientation are only supported on vector maps. So I had to create a map in the gcloud console and pass that ID to the options parameter in the Map component! It is strange that the raster map was initially orienting and tilting but I guess it's something that google enforces?

<GMapMap
        :center="center"
        :zoom="15"
        map-type-id="hybrid"
        style="
          width: 100%;
          height: 900px;
          margin: 10px;
          padding: 10px;
        "
        :options="{
          heading: 220,
          tilt: 53,
          zoomControl: true,
          scaleControl: false,
          streetViewControl: false,
          rotateControl: true,
          rotateControlOptions: {
            position: 'RIGHT_CENTER',
          },
          fullscreenControl: false,
          mapId:'<map-id>'
        }"
        ref="map"
      >