[Vuejs]-TypeError: Cannot read property 'firstChild' of null while displaying street view panorama using vue js

by

0👍

I solved this problem, so I loaded the script in main.js

export const loadedGoogleMapsAPI = new Promise( (resolve,reject) => {

window['initialize'] = resolve;

let GMap = document.createElement('script');

GMap.setAttribute('src',
'https://maps.googleapis.com/maps/api/jskey=API_KEY&callback=initialize');
document.body.appendChild(GMap); 
 });

Then I imported it in my component:

import { loadedGoogleMapsAPI } from "@/main";

then I called initialize function in mounted():

  mounted() {
loadedGoogleMapsAPI.then(() => {
  console.log("loaded");
  this.initMap();
});
},
methods: {
initMap() {
  const element = document.getElementById(this.mapName);
  console.log(this.mapName);
  const options = {
    zoom: 14,
    center: new google.maps.LatLng(this.station.lat, this.station.lng)
  };
  const map = new google.maps.Map(element, options);
  var panorama = new google.maps.StreetViewPanorama(
        document.getElementById(this.panoName), {
          position: new google.maps.LatLng(this.station.lat, 
          this.station.lng),
          pov: {
            heading: 34,
            pitch: 10
          }
        });
    map.setStreetView(panorama);
  }
  }

I hope this will be useful for you

Leave a comment