I'm trying to render a vue js ponent which is simply -

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

by passing it into the marker's infowindow

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

And the vueJS ponent being -

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

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

However, this doesn't work and the window is blank.

I'm trying to render a vue js ponent which is simply -

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

by passing it into the marker's infowindow

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

And the vueJS ponent being -

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

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

However, this doesn't work and the window is blank.

• javascript
• google-maps
• vue.js
• vuejs2

3 Answers 3

After revisiting this today I was able to do this by programmatically creating an instance of the vue ponent and mounting it before simply passing its rendered HTML template as the infowindow's content.

InfoWindow.vue

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

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

And in the portion of the code that is required to create before opening the info-window:

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

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

instance.$mount();

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

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

Note: I haven't experimented with watchers and event-driven calls for this.

Vue3:

Found the following solution for Vue3

import MapInfoWindow from "MapInfoWindow.vue";

var app = createApp(MapInfoWindow, { prop: "test" });

const content = document.createElement("div");
app.mount(content);
//document.body.appendChild(content); // Don't insert into actual DOM, but indirectly via infowindow

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

In vue.js template interpolation with the "double moustaches" interprets its contents as plain text, not HTML (thus escaping it). If you want to emit HTML, you need to user the v-html directive:

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

For reference, see Raw HTML in the guide and the v-html API docs.

Note that in this way, data bindings are not considered, so I'm not really sure that manipulating raw HTML is the best strategy here.