Control the order of injection of <script> tags in index.html

snowdrop

Good day. I’m trying to use oms (https://www.npmjs.com/package/overlapping-marker-spiderfier) in vue-google-maps but keep receiving an error that ‘google is not defined.’

I’ve tried this link https://stackoverflow.com/questions/46772291/referenceerror-google-is-not-defined-vue, but still the issue persists. I think the cause is that, when I try to inspect to code of my vue app, it arranged the code this way:

<!-- built files will be auto injected -->

<script type="text/javascript" src="/js/app.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=<key>&amp;callback=vueGoogleMapsInit" async="" defer="">
</script>

With this, oms cannot find the script because app.js executes first before the execution of google maps script. Is there a way to fix this behavior? like declaring the app.js as the last script to be injected? I don’t have any idea if I can control the declaration of the scripts because as stated in the code above, “built files will be auto injected”. Thanks in advance.

benoitranque

Use a promise for this. Here is a post I made some time ago about this issue

Edit: wrap code in three backticks ` to format properly

snowdrop

@benoitranque thanks. I’ll try implementing what you’ve done in your post. Another problem is that vue-google-maps, once initialized is the one that is injecting the google maps api script tag onto the index.html file. I’ll try searching for workaround for this to specify my own declaration of gmaps api script tag as I will have to rewrite all map related code if I can’t find one.

Btw thanks for the tip about backticks. I’m new in posting to forums and I learned this backticks thing when I posted in github just last week. I tried searching for buttons that says ‘code’ or an icon with ‘<>’, github has this kind of button for inserting a code, but I can’t find this when I post this.

benoitranque

Here is an example of me using google maps. Note I’m not using vue-google-maps:

<template>
  <div class="g-map" id="google-map-instance"></div>
</template>

<script>
import Google from '../google'
export default {
  name: 'GMaps',
  props: {
    zoom: {
      default: 12,
      type: Number
    },
    showinfowindow: {
      type: Boolean,
      default: false
    }
  },
  data: function () {
    return {
      map: null,
      zoom: 12,
      position: {
        lat: -17.767355,
        lng: -63.248819
      }
    }
  },
  computed: {
    options: function () {
      return {
        zoom: this.zoom,
        center: this.position,
        disableDefaultUI: true,
        disableDoubleClickZoom: false,
        draggable: true,
        scrollwheel: false
      }
    }
  },
  methods: {
    initMap: function () {
      const element = document.getElementById(this.mapName)
      this.map = new google.maps.Map(element, this.options)
    }
  },
  async mounted () {
    await Google()
    this.initMap()
  }
}
</script>
<style lang="stylus">
@import '~variables'

.g-map
  width 100%
  height 100%
  margin 0 auto
  background $white
</style>

snowdrop

@benoitranque thanks for the example, but after a lot of digging on the vue2-google-maps, I’ve found a way to change the order of the declaration of script in index.html. Though, I will need to let the maintainer in github update it if it is good solution. I prefer vue2-google-maps as it takes little code to write compared to manually doing it with vanilla javascript. If the maintainer will not update it, either I’ll fork it or I’ll use your solution instead.

snowdrop

I’ve got another solution working. For those who might need this in the future, here’s the link on the discussion about the solution: -> https://github.com/xkjyeah/vue-google-maps/issues/301

No More Posting New Topics!

Control the order of injection of <script> tags in index.html