Vue google Map Info window
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 }, }}