Can Vue2-Google-Maps dynamically load API keys using props?

Is there a way to access the component props before it gets rendered? I want to dynamically load the Google Maps API based on a passed prop value.

import * as VueGoogleMaps from 'vue2-google-maps';
import GmapCluster from 'vue2-google-maps/dist/components/cluster';
import Vue from 'vue';
Vue.use(VueGoogleMaps, {
    load: {
        // Use the prop 'apiKey' here
        key: '..........',
        libraries: 'places',
    }
});
Vue.component('GmapCluster', GmapCluster);
export default {
    name: 'api',
    props: ['apiKey'],
    methods: {
    },
    created() {

    }
}

Answer №1

I recently came across this project that I hadn't heard of before, and it seems like the project page is looking for contributors, but it has over 100 issues. Based on my experience, I would recommend switching to a different library. I have had positive results using https://github.com/KoRiGaN/Vue2Leaflet

Answer №2

The task can be accomplished within the beforeMount() lifecycle hook.

     beforeMount() { 
        activateGmapApi({
            accessKey: apiKeyProp
        });
      }

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

Ways to address issues in my tree-building algorithm when the parent ID is missing

Currently, I'm in the process of creating a function to build a tree. Everything seems to be functioning correctly until I encounter a scenario where a document is added with a parentID that doesn't exist in the list. The root node is intended to ...

Nothing is in the Laravel array when using `$request->all()`

In the process of developing a shopping cart using Laravel. Here are the details : Routes : Route::post('/cart/add', 'CartController@store')->name('cart.store'); Route::patch('/cart/{product}', 'CartContro ...

Stopping Angular Route Alteration Depending on Routing Conditions

I have been searching everywhere for a solution to this issue. My goal is to be able to access the routing parameters collection and prevent the route from loading if a certain parameter is missing. I have tried using preventDefault in $routeChangeStart, b ...

Monitor changes in the visible price range in lightweight-chart

Is there a way to detect when the visible price range changes in lightweight-chart, similar to how the timeScale's visible time range change can be detected through subscribeVisibleTimeRangeChange? I couldn't find anything related in the document ...

Trigger offcanvas modal and backdrop simultaneously using Bootstrap v5.0

Working with Bootstrap v5.0 offcanvas has been smooth sailing until I hit a roadblock. Clicking on the offcanvas button seems to be triggering both the offcanvas-backdrop and modal-backdrop divs simultaneously. <div class="modal-backdrop fade show ...

Capturing user inputs in PHP or AJAX

Is there a way to capture keystrokes on a web page regardless of where the user is focused? For example, if someone has the webpage open and they press '1', can it trigger an action? And if they press '2', can something else happen wit ...

Bcrypt.compare function working in code but not functioning in chai/mocha tests

I have integrated node.js backend into my project. For encrypting passwords, I am utilizing the bcrypt library. To compare the string password from the request with the hashed password in the database, I am using the bcrypt.compare function. The bcrypt.com ...

Having trouble accessing data in Laravel and Vue JS views

I'm currently working on displaying table data in a view using Vue.js and Laravel. Here is what I have attempted so far: This is the comment controller: public function index() { $comment = Comment::Latest()->paginate(10); return new Comm ...

Utilizing react-query and next.js to pre-fetch initial data and automatically re-fetch when a filter is modified

In my NextJs project, I am attempting to prefetch data using react-query. The initial data should only be updated if the filter is modified. To manage the filter states, I have implemented State Hooks. function JobSearch(props) { const [pageNumber, setPa ...

Webpack resolve.alias is not properly identified by Typescript

In the Webpack configuration, I have set up the following: usersAlias: path.resolve(__dirname, '../src/pages/users'), In my tsconfig.json, you can find: "baseUrl": ".", "paths": { "usersAlias/*": ["src/pages/users/*"], } This is how the cod ...

What is the best way to present retrieved JSON data from a database in Node.js without using the JSON format?

Here is the code snippet: var http=require("http"); var fs = require("fs"); var express = require("express"); var app = express(); var path = require("path"); var mysql = require('mysql'); var ejs = require("ejs") var bodyParser = require(&apos ...

Exploring the loading of stateful data in ReactJS and implementing optimizations

Exploring the world of ReactJS in conjunction with Django Rest Framework (DRF) def MyModel(model): ... status = ChoiceField(['new', 'in progress', 'completed'...]) In my application, I have dedicated sections for eac ...

Splitting with Regex - One Time Operation

Here is some of my Jquery code along with Regex: $("[class^=ipsum-img],[class^=ipsum-img-]").each(function(){ var x = $(this).attr("class"); console.log(x.length); if (x.length>8) { var m = x.split(/(\d+)[^-]*$/g); cons ...

The 'lng' property cannot be accessed because it is undefined

I'm currently implementing a custom marker in Google Maps using ng-map.min.js I tried changing the position of the custom marker, but encountered the following error: Uncaught TypeError: Cannot read property 'lng' of undefined at a.set ...

Converting RGBA to Hex Color Code with Javascript: A Step-by-Step Guide

I attempted to change the rgba color representation to hexadecimal, but I encountered difficulty in converting the opacity value while successfully converting the remaining colors. Here is the snippet of my code: var colorcode = "rgba(0, 0, 0, 0.74)"; ...

PHP is unable to decode JSON that has been converted from JavaScript

When I send an array as a POST request, I first convert it to JSON using the JSON.stringify() method. However, I encountered an issue when trying to decode it in PHP. // JavaScript var arr1 = ['a', 'b', 'c', 'd', & ...

What is the best way to arrange an array of objects in JavaScript by numerical order and then alphabetically?

Possible Duplicate: Sorting objects in an array by a field value in JavaScript I'm looking to sort an array of objects both numerically (by id) and alphabetically (by name). However, the current method I'm using is not giving me the desired ...

Is it possible to apply styles to the body of a document using styled-components?

Is it possible to apply styles from styled-components to a parent element, such as the <body> tag, in a way that resembles the following: const PageWrapper = styled.div` body { font-size: 62.5%; } ` ...

A step-by-step guide on transferring Data URI from canvas to Google Sheet using the fetch method

I am trying to send an image as base64 code to a Google sheet using fetch. However, I am encountering an error that says "data_sent is not defined" when I run my code. I need help identifying the problem and finding a solution to fix it. For reference, & ...

Adding a tooltip to a specific header in a Vue list - here's how!

My goal is to add a tooltip to a specific header labeled 'Retire' within a data table, without affecting any of the other headers. It's been quite the learning experience for me as a Vue novice, but with the help of AI (chatgpt), I've m ...