Vue Import Js file Google Maps Overlay Error when calling in browser

Question

guys, I am using Google Maps overlay which I import in VueJs as

import CustomMarker from "@/components/maps/CustomMarkerClass";

and inside the CustomMarkerClass.js I have the code inside the Class

function CustomMarker(google, latlng, map, count, status, modems, vueThis) {
  this.latlng = new google.maps.LatLng(latlng); 

  this.setMap(map);
  this.vueThis = vueThis;
  this.count = count;
  this.status = status;
  this.modems = modems;   

}
CustomMarker.prototype = new google.maps.OverlayView();
......

Vue Router config for the url

......
{
      path: "/map",
      name: "MapMarkers",
      alias: ["/map&zoom*"],
      component: MarkersMap,
      beforeEnter(to, from, next) {
        checkLocalStorage();
        next();
      }
    }
.......

when I call http://localhost/8080/map it works fine but when I build the project and upload it to the server I get the error when I call http://mydomain/map

vue-router.esm.js:1897 ReferenceError: google is not defined at Object.GT+g (CustomMarkerClass.js:16) at c (bootstrap 160a9f95e986b8311f12:54)

I import google maps API script via async call in mounted of MarkersMap and wait for it to initialize to draw custom markers later . A bit strange that it works on localhost but when built causes an error when navigating to direct URL

iLyas · Accepted Answer · 2019-03-03 09:20:45Z

the problem got solved via using promises in calling google maps script. Would recommend this article http://javascript.info/promise-basics

gmaps.js:

const API_KEY = "your API key";

const CALLBACK_NAME = "initMap";

let initialized = !!window.google;

export default function init() {
  return new Promise((resolve, reject) => {
    if (initialized) {
      return resolve(window.google);
    }

    initialized = true;
    // The callback function is called by
    // the Google Maps script if it is
    // successfully loaded.
    window[CALLBACK_NAME] = () => resolve(window.google);
    // We inject a new script tag into
    // the `<head>` of our HTML to load
    // the Google Maps script.
    const script = document.createElement("script");
    script.async = true;
    script.defer = true;
    script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&callback=${CALLBACK_NAME}`;
    script.onload = () => {
      resolve(window.google);
    };
    script.onerror = () => reject(new Error("Script load error: " + src));
    document.querySelector("head").appendChild(script);
  });
}

VueRouter

import gmapsInit from "@/components/maps/gmaps.js";
......

{
      path: "/map",
      name: "MapMarkers",
      alias: ["/map&zoom*"],
      component: MarkersMap,
      beforeEnter(to, from, next) {
        checkLocalStorage();            
        gmapsInit()
          .then(success => next())
          .catch(error => console.log("error to load google script"));
      }
    }

Collectives™ on Stack Overflow

Vue Import Js file Google Maps Overlay Error when calling in browser

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related