vue2-google-maps를 사용할 때 정보 창을 구글 맵용 html로 채우려면 어떻게 해야 합니까?

vue2-google-maps를 사용할 때 정보 창을 구글 맵용 html로 채우려면 어떻게 해야 합니까?

vue2-google-maps를 사용할 때 Google 지도에 대한 사용자 정의 정보 창을 만들고 싶습니다.하지만 아직까지는 정보창에 텍스트만 추가할 수 있는 것으로 알고 있습니다.아래와 같이 커스텀 HTML로 커스터마이즈 할 수 있는 방법이 있습니까?

vue2-google-maps를 사용하여 이 작업을 수행합니다.

고마워요.

이를 위해서는 infoOptions 속성의 "content" 파라미터를 전송합니다.

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

데이터에서는

    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>'
      }
    };
}

언급URL : https://stackoverflow.com/questions/50850236/how-to-populate-info-window-with-html-for-google-maps-when-using-vue2-google-map