CODEWITHSUNDEEP
javascriptgoogle-mapsvue.jsvue-component
Jesper
Jesper

Reputation: 2094

How to set infoWindow in vue-google-maps - Vue.js

I'm quite new to vue.js. I'm using vue-google-maps to display the map, and I want to add an opened infowindow to it. I tried adding an infoWindow component to infowindow tag, but no success.

template

<gmap-map style="width: 70%; height: 100%; position: absolute; left:0; top:0"
            v-bind:center="center"
            v-bind:zoom="zoom"
            v-bind:options="options"
>
    <infoWindow :position="{
            lat: 57.708,
            lng: 11.974
        }" :opened="true" :content="Hello World">
    </infoWindow>
</gmap-map>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.min.js"></script>
<script src="https://rawgit.com/GuillaumeLeclerc/vue-google-maps/master/dist/vue-google-maps.js"></script>

script

VueGoogleMap.load({
    'key': 'API_KEY'
});

Vue.component('gmap-map', VueGoogleMap.Map);
Vue.component('infoWindow', VueGoogleMap.infoWindow);

new Vue({
    el: 'body',
    data: {
        center: {lat: 57.708, lng:  11.975},
        zoom: 14,
        options: {styles: mapStyle},
        infoWindow: [{
            closeBoxURL: "",
            maxWidth: 200
        }]
    }
});

Can someone please guide me?

Upvotes: 2

Views: 4011

Answers (1)

Jesper
Jesper

Reputation: 2094

As it turns out, I just had to set the VueGoogleMaps-key "infowindow" with a capital first letter (like this: Vue.component('infoWindow', VueGoogleMap.InfoWindow);).

Ridiculous mistake, but the vue-google-maps by GuillaumeLeclerc deserves better documentation!

Upvotes: 3

Related Questions