Google Maps VueJS 컴포넌트(vue2-google-maps)를 Larabel 블레이드 뷰에 통합

Google Maps VueJS 컴포넌트(vue2-google-maps)를 Larabel 블레이드 뷰에 통합

vue2-google-maps npm 패키지를 사용하여 Google Maps Vue JS 컴포넌트를 Laravel 어플리케이션뷰에 통합하고 있습니다.

npm 패키지 매뉴얼에 따라 다음을 사용하여 npm 패키지에서 vue 컴포넌트를 로드합니다.

import * as VueGoogleMaps from 'vue2-google-maps';

Vue.use(VueGoogleMaps, {
  load: {
    key: 'mapkey',
    libraries: 'places'
  }
});

다음으로 블레이드 뷰 내의 컴포넌트를 설명서의 샘플 코드와 함께 사용합니다.

    <GmapMap
      :center="{lat:10, lng:10}"
      :zoom="7"
      map-type-id="terrain"
      style="width: 100%; height: 500px" 
      id="googleMap"
    >
        <GmapMarker
            :key="index"
            v-for="(m, index) in mapPoints"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            @click="center=m.position"
        >
        </GmapMarker>
    </GmapMap>

다만, 다음의 에러가 표시됩니다.

알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록했습니까?재귀 구성 요소의 경우 "이름" 옵션을 제공해야 합니다.

---

몇 가지 조사 후 이 게시물을 발견했는데, 다른 컴포넌트명을 사용하고 있었기 때문에 대체 컴포넌트명 gmap-map과 gmap-marker를 사용해 보았습니다만, 같은 에러가 발생했습니다.

<gmap-map
  :center="center"
  :zoom="12"
  style="width:100%;  height: 400px;"
>
  <gmap-marker
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    @click="center=m.position"
  ></gmap-marker>
</gmap-map>

---

그런 다음 모든 컴포넌트가 아니라 Map And Marker 컴포넌트를 직접 Import해 보았습니다.다만, 같은 에러가 발생합니다.

import GmapMap from 'vue2-google-maps/src/components/map';
import GmapMarker from 'vue2-google-maps/src/components/marker';

Vue.component('GmapMap', GmapMap);
Vue.component('GmapMarker', GmapMarker);

---

내가 뭘 잘못하고 있지?

플러그인의 컴포넌트는 다음 경우에만 설치됩니다.installComponents할 수 있는 선택권true.

https://github.com/xkjyeah/vue-google-maps/blob/v0.10.5/src/main.js#L69

import * as VueGoogleMaps from 'vue2-google-maps';

Vue.use(VueGoogleMaps, {
  load: {
    key: 'mapkey',
    libraries: 'places'
  },
  installComponents: true
});

언급URL : https://stackoverflow.com/questions/56615125/integrating-google-maps-vuejs-components-vue2-google-maps-into-a-laravel-blade