Vue google Map Info window Vue google Map Info window vue.js vue.js

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        },    }}