Adding a KMZ layer to Google Maps with Vue 2

Looking to integrate the vue google maps package? You can find it here: https://github.com/xkjyeah/vue-google-maps

Within a mounted() lifecycle hook, I am attempting to set the layer as shown below:

mounted() {
  this.$refs.gmap.$mapPromise.then((map) => {
    let options = {
      url: 'https://beeline.kg/ru/binaries/content/assets/kmz-files/3g-v2.kmz'
    }
    let kml = new google.maps.KmlLayer(options)
    kml.setMap(this.$refs.gmap)
  })
},

Encountering an error in console stating: "InvalidValueError: setMap: not an instance of Map"

The reference this.$refs.gmap points to a google maps component defined like this:

<GmapMap
  ref="gmap"
  :center="{lat: lat, lng: lng}"
  :zoom="5"
  map-type-id="roadmap"
  style="width: 100%; height: 500px"
  :options="{
    mapTypeControl: false
  }"
>
</GmapMap>

It seems that the issue lies here:

let kml = new google.maps.KmlLayer(options)

How can I correctly instantiate a new google maps object when using this particular package?

javascriptgoogle-mapsvue.js

Answer №1

Surprisingly, it turned out to be quite simple. It's incredible that no one seems to have any idea how to accomplish this.

mounted() {
  this.$refs.gmap.$mapPromise.then((map) => {
    let options = {
      map: map,
      url: `https://example.com/filename.kmz?dummy=` + (new Date()).getTime()
    }
    let kml = new google.maps.KmlLayer(options)
  })
}

The use of dummy parameters is a clever way to prevent caching by Google Maps.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform an array of object's designated key values into a string that is separated by commas

Is there a way to convert specific key values of an object into a comma-separated string? I have been able to do this with arrays, but my current challenge is that my data is an array of objects. I want to convert each 'id' value into an array of ...

javascripttypescript

When using Material UI, I ran into an issue where my Card Component was being added to my Appbar. To improve user interaction, I desire for the cards to only appear once

The formatting of the naming conventions is incorrect. Please disregard those. Snippet of code for the Appbar: const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1 }, title: { flexGrow: 1 } })); export default function Appp() ...

javascriptreactjsreact-reduxmaterial-uiappbar

Upon completion of the function, the ForEach loop commences

I'm encountering an issue with my code. I am trying to verify if there is an item in the cutlist array that has a material_id which does not exist in the materials database. However, the code within the forEach loop is being executed after the functio ...

javascriptnode.jstypescripttypeorm

Looking to retrieve a cookie within Vue Router in Vue 3? Utilize the following approach within your router's `index.js

Scenario: Developing a Vue3 app with express as the API backend. Express utilizes express-sessions to create a server-side session that is transmitted to the browser and received in subsequent requests. I am in the process of implementing a route guard to ...

javascriptvue.jssession-cookiesvuejs3

Modify vanilla JavaScript carousel for compatibility with Internet Explorer

I am currently in the process of creating a website that incorporates a carousel similar to the one found at the following link: https://codepen.io/queflojera/pen/RwwLbEY?editors=1010 At the moment, the carousel functions smoothly on opera, chrome, edge ...

javascripthtmlcss

Error: Google Plus Cross-Origin Resource Sharing Issue

I recently developed an AngularJS application that utilizes Google's server-side flow for authentication. The issue arises when my AngularJS app is hosted on one server and the Rest API is hosted on another. After successfully logging in, I encounter ...

javascriptangularjsapioauthcors

Utilizing JavaScript to employ the indexOf function on arrays in MongoDB

In my script, I have an array outside mongodb called title. The dataset in mongodb contains fields that I do not want to include (Dataset_1). I am using an indexOf function to match values and create a ranking. The structure of Dataset_1 is as follows: g ...

javascriptarrays

Is it possible to use JavaScript to click on a particular point or element within a canvas?

Is there a way to trigger a click at a specific point on a canvas without direct access to the code that generates it? I've attempted using coordinates, but haven't had any success. Any alternative suggestions would be appreciated. UPDATE: To pr ...

javascriptcanvas

Extracting Ajax responses and storing them as variables in JavaScript

Currently, I am developing a small PHP script and using the following code for an ajax query: var CODE = $('.code').val(); var CASE = $('.code').attr('case'); $.ajax({ type:'POST', ...

javascriptphpjqueryajax

The jquery autocomplete feature is failing to display search results

I have a text input with autocomplete functionality using JavaScript: JavaScript code: $("#descSearchBox").keyup(function(e) { $(".ui-autocomplete").removeClass("ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all") .ad ...

javascriptphpjqueryautocomplete

Angularjs directive: independent scope and encapsulated elements

Why aren't the contained/child elements rendering when using an isolated scope? I suspect that the parent is not rendered yet. I tried adding a $timeout, but still no luck. If I remove the isolated scope by commenting out scope: {}, it works. How c ...

javascriptangularjsangularjs-directive

Vuejs allows objects to trigger the execution of methods through elements

My goal is to utilize a function in order to individually set the content of table cells. In this specific scenario, I aim to enclose the status with the <strong> - Tag (I refrain from modifying the template directly because it is stored within a com ...

javascriptfunctionobjectcallbackvue.js

Merge jQuery with the jetpack infinite scroll feature

Utilizing the jQuery code below for an accordion effect on all my WordPress posts on the front end. (function($) { function initAccordion() { var $ele = $('.entry-content').hide(); $(".entry-header").unbind('click&apos ...

javascriptjqueryhtmlcsswordpress

Utilize React to process and submit payments through Stripe

I am currently working on integrating Stripe Elements with my React application. The JavaScript page below showcases the code I use to submit the payment form, which I have compiled from various sources online. Upon submitting the form, I receive a token; ...

javascriptreactjsstripe-payments

Is there a way to use grease/tampermonkey to automatically redirect the current definition from Dictionary.com to Thesaurus.com?

Is there a way to use Greasemonkey or Tampermonkey to automatically open the definition on Dictionary.com at Thesaurus.com, and vice versa, when clicking specific links? (Shown in red) My initial thought is to retrieve the word being searched from the URL ...

javascriptgreasemonkeytampermonkey

A guide to eliminating TextRow and inserting a string into JSON using NodeJs

To remove TextRow and add the string true to JSON in NodeJs, I have included the following code: NodeJs Code: function groupBy(objectArray, property) { return objectArray.reduce(function (acc, obj) { let key = obj[property] if (!acc[key]) { ...

javascriptnode.jsarraysjson

Tips for boosting the URL count when loading additional data in Vue

Implementing a show more data button that retrieves data from an API on the backend. The API url contains a number which determines when the data should be updated. .post(`/account/api/auth/user/${userName}/posts/more/${visible}/`) I have created a funct ...

vue.jsvuejs2vue-componentvuetify.js

Leveraging Ajax in Django to communicate with the backend and showcase the outcome

I need assistance with implementing ajax functionality to send user input to a Django backend for text processing, and then display the results. However, due to my limited experience with ajax, I'm struggling to figure out where I'm going wrong. ...

javascriptpythonajaxdjango

Efficiently updating arrays within object arrays using MongoDB

I have the following data structure: { data: [ {pos:"0", moreData: ["a", "b"] }, {pos:"1", moreData: ["a", "c"] }, ]} I want to update this structure by adding a letter to moreData where pos ...

javascriptnode.jsmongodbmongodb-querydatabase

What happens when tabs are dynamically added on keypress?

I am encountering issues with this code snippet. $('body').on("keypress", ".message", function(e) { if ( e.keyCode == 13 && $(".message").val().length > 0 ) { input = $(".message"); // Check for join com ...

javascriptjquery