How to populate info window with html for google maps when using vue2-google-maps?

Question

I'd like to make a custom Info Window for Google Maps when using vue2-google-maps. But so far, from what I know we can only add text to the info window. Is there any way to customize that with my custom HTML like below.

I want this to be done using vue2-google-maps.

Thanks.

Answer 1

We can achieve this by sending "content" parameter in infoOptions attribute.

             <gmap-map
                :center="center"
                :zoom="13"
                :options="mapStyle"
                ref="map"
                style="width: 100%; height: 100%"
                >
                <gmap-info-window
                :options="infoOptions"
                :position="infoPosition"
                :opened="infoOpened"
                :content="infoContent"
                @closeclick="infoOpened=false">

                </gmap-info-window>
                <gmap-marker v-if="mapLoaded"
                :key="index"
                v-for="(m, index) in markers"
                :position="m.position"
                :clickable="true"
                @click="toggleInfo(m, index)"
                ></gmap-marker>
            </gmap-map>

And in data

    data() {
    return {
      map: null,
      mapLoaded: false,
      center: { lat: 22.449769, lng: .3902178 },

      markers: [
        {
          position: {
            lat: 22.449769,
            lng: .3902178
          }
        }
      ],
      infoPosition: null,
      infoContent: null,
      infoOpened: false,
      infoCurrentKey: null,
      infoOptions: {
        pixelOffset: {
          width: 0,
          height: -35
        },
        content:
          '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>'
      }
    };
}