Vue google Map Info window - vue.js

Question

i have a vue app that showing google map by using vue2-google-map.
but i have a problem with to implement maps.infowindow to my marker because there are lack of vuejs stuff reference source.
this is my code for marker template :
<GmapMap ref="mapRef"
:center="{lat: 3.974341, lng: 102.438057}"
:zoom="7"
class="gmap"
>
<GmapMarker
:key="index"
v-for="(location, index) in markers"
:position="location"
:draggable="true"
icon="https://img.icons8.com/color/48/000000/map-pin.png"
/>
</GmapMap>
this is the script:
export default {
data() {
return {
markers: [],
infowindow: [],
};
},
async setMarker() {
const { data } = await LocationRepository.getData(); //get data from api
this.tempLatLong = data;
this.$refs.mapRef.$mapPromise.then((map) => {
this.markers = [];
this.infowindow = [];
const bounds = new this.google.maps.LatLngBounds();
for (let i = 0; i < this.tempLatLong.length; i += 1) {
const lati = parseFloat(this.tempLatLong[i].latitude);
const long = parseFloat(this.tempLatLong[i].longitude);
const location = new this.google.maps.LatLng(lati, long);
bounds.extend(location);
const marker =
{
lat: lati, lng: long
}
this.markers.push(marker);
//this is where the problem occur.
const content = '<div id="content">'+'<p>test</p>' +'</div>'
this.infowindow.push(content)
}
map.fitBounds(bounds);
map.panTo({ lat: 3.974341, lng: 102.438057 });
});
},
i referring to google map documentation about the infowindows but don't have any idea how to implement it into this code. can someone teach me how to use this infowindow in vuejs map.

Answer 1

here i have a working example from one of my projects. the data for the lat an lng comes from veux store. so you have to modify these
<template>
<GmapMap
:center="getCenterPosition"
:zoom="getZoomLevel"
map-type-id="roadmap"
style="width: 100%; height: 600px"
>
<GmapMarker
v-for="(m, index) in loadedDealers"
:key="index"
:position="{ lat: m.lat, lng: m.lng }"
:clickable="true"
:draggable="false"
#click="openInfoWindowTemplate(index)"
:icon="{ url: require('./test.png') }"
/>
<gmap-info-window
:options="{
maxWidth: 300,
pixelOffset: { width: 0, height: -35 }
}"
:position="infoWindow.position"
:opened="infoWindow.open"
#closeclick="infoWindow.open=false">
<div v-html="infoWindow.template"></div>
</gmap-info-window>
</GmapMap>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
infoWindow: {
position: {lat: 0, lng: 0},
open: false,
template: ''
}
}
},
computed: {
...mapGetters([
'getDealers',
'getCenterPosition',
'getZoomLevel',
]),
loadedDealers() {
return this.getDealers
}
},
methods: {
openInfoWindowTemplate(index) {
const { lat, lng, name, street, zip, city } = this.loadedDealers[index]
this.infoWindow.position = { lat: lat, lng: lng }
this.infoWindow.template = `<b>${name}</b><br>${street}<br>${zip} ${city}<br>`
this.infoWindow.open = true
},
}
}