I recently added a Google Maps Vue JS component to my Laravel application using the vue2-google-maps npm package.
Following the instructions in the npm package documentation, I loaded the vue components like this:
import * as VueGoogleMaps from 'vue2-google-maps';
Vue.use(VueGoogleMaps, {
load: {
key: 'mapkey',
libraries: 'places'
}
});
Then, in my blade view, I used the components as shown in the documentation example:
<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>
However, I encountered an error saying:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
In my search for a solution, I found a helpful post that suggested using different component names. I tried using gmap-map & gmap-marker, but unfortunately, the error persisted.
<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>
I also attempted importing the Map And Marker components directly instead of recursively, but again, I faced the same error:
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);
I'm unsure of what I might be doing incorrectly. Any insights would be greatly appreciated!