Using html in google map info window

[reduanrafi]

Hi ! I am using vue-google-maps library and I want to change the info window style. I want a list and a button on that info window .

Note: Another related issue also opened last year but no one respond . That's why I created this issue.

[blaiddyd]

Hello! I'm not too sure how to do it by using the info window component. But you might want to just do it the way it is outlined in the google maps docs right here

You can also easily display your own custom HTML components with the vue2-gmap-custom-marker package. Hope this helps a little 😃

Edit: Here is a changed version of the info window example on the documentation website where I have added a button and a list inside the info window.

  <template>
    <gmap-map :center="center" :zoom="15" style="width: 100%; height: 500px">
      <gmap-info-window :options="infoOptions" :position="infoWindowPos" :opened="infoWinOpen" @closeclick="infoWinOpen=false">
           //your custom html components
            <button type="button"
                style="background-color: pink;"
            >
                Hello!
            </button>
            <ul>
                <li>
                    List Item
                </li>
                <li>
                    Another One
                </li>
            </ul>
      </gmap-info-window>

      <gmap-marker :key="i" v-for="(m,i) in markers" :position="m.position" :clickable="true" @click="toggleInfoWindow(m,i)"></gmap-marker>
    </gmap-map>
</template>

<script>
    export default {
        name: 'example',
        data: () => {
            return {
                center: {
                    lat: 47.376332,
                    lng: 8.547511
                },
                infoContent: '',
                infoWindowPos: null,
                infoWinOpen: false,
                currentMidx: null,
                //optional: offset infowindow so it visually sits nicely on top of our marker
                infoOptions: {
                    pixelOffset: {
                    width: 0,
                    height: -35
                    }
                },
                markers: [{
                    position: {
                    lat: 47.376332,
                    lng: 8.547511
                    },
                    infoText: 'Marker 1'
                }, {
                    position: {
                    lat: 47.374592,
                    lng: 8.548867
                    },
                    infoText: 'Marker 2'
                }, {
                    position: {
                    lat: 47.379592,
                    lng: 8.549867
                    },
                    infoText: 'Marker 3'
                }],
            }
        },
         methods: {
          toggleInfoWindow: function(marker, idx) {
            this.infoWindowPos = marker.position;
            this.infoContent = marker.infoText;

            //check if its the same marker that was selected if yes toggle
            if (this.currentMidx == idx) {
              this.infoWinOpen = !this.infoWinOpen;
            }
            //if different marker set infowindow to open and reset current marker index
            else {
              this.infoWinOpen = true;
              this.currentMidx = idx;

            }
          }
         }
    }
</script>

[TihomirS]

hi, this is ok, but if I want to put a link with URL? how to send URL to href ?

I try: {{infoURLtxt}}

and in function: this.infoURL= marker.infoURL; this.infoURLtxt= marker.infoURLtxt;

but only infoURLtxt is OK..

any ideas?

[blaiddyd]

Hi! Do you mind sharing more of your code where you are trying to achieve this? Thanks!

[TihomirS]

hi, Ekin,

I try to send data here to link:

<gmap-map ref="map" :center="center" :zoom=10 style="width: 100%; height: 500px">
  <gmap-info-window :options="infoOptions" :position="infoWindowPos" :opened="infoWinOpen" @closeclick="infoWinOpen=false">
    <p><strong style="font-size:18px;">{{infoTitle}}</strong></p>
    <p>
      {{infoAddress}}
    </p>
    <a v-bind:href="{{infoURL}}">{{infoURLTXT}}</a>
    <!-- <a href="buildURL({{infoURL}})">visit site</a> -->
  </gmap-info-window>
  <gmap-marker :key="i" v-for="(m,i) in markers" :visible.sync="m.visible" :title.sync="m.infoText" :position.sync="m.position" :icon.sync="m.icon" :clickable="true" @click="toggleInfoWindow(m,i)"></gmap-marker>
</gmap-map>

I try:

• v-bind:href="{{infoURL}}"
• href="buildURL({{infoURL}})"

both not working..

Best, T.

[blaiddyd]

Have you tried doing :href="infoURL" instead? Usually, you don't need to use the {{}} when you are binding variables to attributes.

Hope it helps!

[Blackcell]

@TihomirS, @ekinbukulmez is correct. You should not be passing infoURL in using interpolation brackets. Use :href="infoURL"

Please let us know if it works out.

[TihomirS]

yesterday when I tried it didn't work .. now is OK :) I can confirm this is the right way 👍 thanks @ekinbukulmez , @Blackcell

[garcia206]

Is there any way to customize the infoWindow max-width? I've tried

<GmapInfoWindow :options="{maxWidth: 400}">
  <!-- some html here -->
</GmapInfoWindow>

Nothing has worked for me yet.

[dg-mann]

In addition is there any good and not hacky way to just style the infowindow?

[mindtd]

Workaround - in App.vue

1. modify in methods "this.title = marker.infoText;"
2. add :title="m.title" in <gmap-marker :key="i" v-for="(m,i) in markers" :position="m.position" :title="m.title" :clickable="true" @click="toggleInfoWindow(m,i)">

Now both InfoWindow and tooltip show.

Hello! I'm not too sure how to do it by using the info window component. But you might want to just do it the way it is outlined in the google maps docs right here

You can also easily display your own custom HTML components with the vue2-gmap-custom-marker package. Hope this helps a little 😃

Edit: Here is a changed version of the info window example on the documentation website where I have added a button and a list inside the info window.

  <template>
    <gmap-map :center="center" :zoom="15" style="width: 100%; height: 500px">
      <gmap-info-window :options="infoOptions" :position="infoWindowPos" :opened="infoWinOpen" @closeclick="infoWinOpen=false">
           //your custom html components
            <button type="button"
                style="background-color: pink;"
            >
                Hello!
            </button>
            <ul>
                <li>
                    List Item
                </li>
                <li>
                    Another One
                </li>
            </ul>
      </gmap-info-window>

      <gmap-marker :key="i" v-for="(m,i) in markers" :position="m.position" :clickable="true" @click="toggleInfoWindow(m,i)"></gmap-marker>
    </gmap-map>
</template>

<script>
    export default {
        name: 'example',
        data: () => {
            return {
                center: {
                    lat: 47.376332,
                    lng: 8.547511
                },
                infoContent: '',
                infoWindowPos: null,
                infoWinOpen: false,
                currentMidx: null,
                //optional: offset infowindow so it visually sits nicely on top of our marker
                infoOptions: {
                    pixelOffset: {
                    width: 0,
                    height: -35
                    }
                },
                markers: [{
                    position: {
                    lat: 47.376332,
                    lng: 8.547511
                    },
                    infoText: 'Marker 1'
                }, {
                    position: {
                    lat: 47.374592,
                    lng: 8.548867
                    },
                    infoText: 'Marker 2'
                }, {
                    position: {
                    lat: 47.379592,
                    lng: 8.549867
                    },
                    infoText: 'Marker 3'
                }],
            }
        },
         methods: {
          toggleInfoWindow: function(marker, idx) {
            this.infoWindowPos = marker.position;
            this.infoContent = marker.infoText;

            //check if its the same marker that was selected if yes toggle
            if (this.currentMidx == idx) {
              this.infoWinOpen = !this.infoWinOpen;
            }
            //if different marker set infowindow to open and reset current marker index
            else {
              this.infoWinOpen = true;
              this.currentMidx = idx;

            }
          }
         }
    }
</script>

Hello Ekin, running vue.js, the html custom info-window works nicely, but no infoContent display ('Marker 1', 'Marker 2', 'Marker 3'). Tried adding tooltipContent:

infoContent: '', tooltipContent: '',

and like so,

this.infoContent = marker.infoText; this.tooltipContent = marker.infoText;

to no avail. Any suggestion?