Displaying VueJS components within a Google Maps InfoWindow

My attempt to display a vue js component is as follows -

var infowindow_content = "<google-map-infowindow ";
infowindow_content += "content='Hello World'";
infowindow_content += "></google-map-infowindow>";

I aim to pass it into the marker's info window

this.current_infowindow = new google.maps.InfoWindow({
    content: infowindow_content,
});
this.current_infowindow.open(context.mapObject, marker);

The vueJS component in question looks like this -

<template>
    <div>
        {{content}}
    </div>
</template>

<script>
module.exports = {
    name: 'google-map-infowindow',
    props: [ 
        'content',
    ],
}
</script>

Unfortunately, my setup isn't functioning correctly and the window remains empty.

Answer №1

Upon revisiting this task today, I found a solution by dynamically generating a Vue component instance and mounting it before passing its HTML template as the content for the infowindow.

InfoWindow.vue

<template>
    <div>
        {{content}}
    </div>
</template>

<script>
module.exports = {
    name: 'infowindow',
    props: [ 
        'content',
    ],
}
</script>

Here is the code snippet where we implement this approach:

...
import InfoWindowComponent from './InfoWindow.vue';
...

var InfoWindow = Vue.extend(InfoWindowComponent);
var instance = new InfoWindow({
    propsData: {
        content: "This is the info-window content!"
    }
});

instance.$mount();

var new_infowindow = new google.maps.InfoWindow({
    content: instance.$el,
});

new_infowindow.open(<map object>, <marker>);

It's worth noting that I have not yet explored using watchers or event-driven calls in this context.

Answer №2

Vue3 Solution:

Here is a workaround I found for Vue3

import InfoWindowComponent from "InfoWindowComponent.vue";

var application = createApp(InfoWindowComponent, { prop: "test" });

const infoContent = document.createElement("div");
application.mount(infoContent);
//document.body.appendChild(infoContent); // Avoid direct insertion into the DOM

const infoWindow = new google.maps.InfoWindow({
  content: infoContent ,
});

Answer №3

Using the "double mustaches" in vue.js template interprets its contents as plain text, escaping any HTML characters. If you need to display HTML content, use the v-html directive:

<div v-html="content"></div>

For more information, visit Raw HTML in the guide and check out the v-html API documentation.

Keep in mind that by using v-html, data bindings are not taken into consideration, so manipulating raw HTML may not always be the best approach.

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

Obtaining the parent template component in Vue: A quick guide

When using Vue, I am aware that this.$parent can be used to access the upper component in the vdom tree. However, what I am looking for is a way to access the specific component that rendered the current one. For example, let's say I have a component ...

Utilize Selenium to extract information from a webpage, including content that is dynamically generated through JavaScript

Currently, I am facing a dilemma: my desire is to extract information from a webpage (for example, this one) regarding the apps that are available, and then store this data into a database. In my quest to achieve this task, I have opted to use crawler4j t ...

Guide to retrieving account information from a MySQL database

I am currently developing a web application utilizing a three-tier architecture with express and docker. I am integrating mysql as the database to store user accounts. Below is my initialize-database.sql file: CREATE TABLE accounts( personId INT NOT N ...

Can the orientation of a list-group be changed from vertical to horizontal in bootstrap-vue when the screen size is smaller than lg?

Looking to modify a list-group with icons and links for responsive design. The goal is to display icons only on screens smaller than lg and change the orientation from vertical to horizontal. Successfully displayed icons on screens smaller than lg, but st ...

The submission process for a multi-step form in Laravel appears to be malfunctioning

In my step bootstrap form, the submit method is not working. It's linked with jQuery, but if I remove the id then the continue button stops working. How can I take action using route submit without requiring jQuery validation? I only need the continue ...

AngularJS issue: Page content not refreshing

Currently, I am in the process of developing a web application that consists of two main pages - home.html and about.html. The issue I am encountering is that when users click on a specific user in the home.html page, they are redirected to about.html bu ...

Remove the default selection when a different option is chosen using Bootstrap

I have implemented the Bootstrap-select plugin () for a multiple select dropdown on my website. Upon page load, there is a default option that is already selected. See image below: https://i.stack.imgur.com/SzUgy.jpg <select id="dataPicker" class=" ...

Discovering the lengthiest strings in a multi-dimensional array using JavaScript

let lists = ["Grocery", "Clothing", "Furniture"]; let items = [ [ "tomatoes", "cheese", "bread", "ham" ], [ "shirt", "jacket", "jeans" ], [ "sofa", "carpet", "bed" ] ]; These two arrays are connected in ...

extract part of a JavaScript date by utilizing substring

When attempting to populate a text box with a date in the format Wed Sep 14 2016 00:00:00 GMT+0400, I encountered an issue. My goal was to extract the date in the format Sep 14 2016 using the substring method. I implemented the code below, but unfortunate ...

Verify whether dynamic imports are recognized as a module in JavaScript or TypeScript

As part of a project that dates back several years, I am currently revamping the ScriptManager class. Previously, the code would retrieve scripts from a database with variations depending on the customer and installation, where the application used Chrome ...

Is there a way to save a Morris.js chart as a PDF file

I have successfully created a Morris.js Bar Chart using data from PHP and MySQL. Now, I am looking for a way to export this chart into a PDF format. I have attempted to do so using the FPDF library but I am struggling with the implementation. Can anyone ...

Retrieve data from a single PHP page and display it on another page

In my project, I am working with three PHP pages: index.php, fetch_data.php, and product_detail.php. The layout of my index.php consists of three columns: filter options, products panel, and detailed description. Whenever a user clicks on a product in th ...

Flipping the switch to illuminate or darken a room

I am working on a project where I want to create a program that turns on a lightbulb when you click on it, and then turns it off when you click on it again. However, I am facing an issue where no matter which light I click on, the first one always turns ...

How come the data from the Firebase real-time database is only displaying in the console and not on the page when using Vue.js?

I am encountering an issue while trying to display a value stored in my Firebase Realtime Database using the {{ exams.name }} syntax in Vue. Although I can see the value when I console.log it, it does not render on the page. However, when I attempted the s ...

performing a request to Axios API with the inclusion of ${item} within the URL

I am having trouble with calling axios in Vuetify due to backticks and ${} within the URL. I believe I need to convert it into JSON format, but my attempts have been unsuccessful. Could you please provide an explanation? Here is the code snippet. Whenever ...

Switching image source using JavaScript with a button click

I am working on a code where I need to change the image source by clicking a button and also increment the counter to display the next photo. However, I am currently facing an issue where only the first photo is being displayed out of the 8 available image ...

Retrieving the JSON value from a data attribute and then locating the corresponding JSON key in a designated element within the DOM

I have an HTML element that contains a data attribute: <a href="#" data-trigger="{ "rem": "albatros", "ap":1 }'">Remove</a> <div data-container> <p>lorem ipsum<p> <p data-rem></p> </div> 1. So ...

Node.js is being utilized to send an abundance of requests to the server

Here is my setup: var tempServer=require("./myHttp"); tempServer.startServer(8008,{'/fun1':fun1 , '/fun2': fun2 , '/fun3':fun3 , '/fun4':fun4},"www"); This code creates a server on localhost:8008. If I enter th ...

What could be causing the incorrect updating of React State when passing my function to useState?

Currently, I am in the process of implementing a feature to toggle checkboxes and have encountered two inquiries. I have a checkbox component as well as a parent component responsible for managing the checkboxes' behavior. The issue arises when utiliz ...

Angularjs collapsible toggle

I am having trouble launching a simple example of collapse. When I click on the "Toggle collapse" button, nothing happens. There are no errors in the console, but there is one warning in Visual Studio. What could be causing this issue and how can I fix it? ...