Components entrypoint

Import Vue component objects from @gmap-vue/v3/components when you want to register only the components your app needs.

import {
  Autocomplete,
  Circle,
  Cluster,
  DrawingManager,
  HeatmapLayer,
  InfoWindow,
  KmlLayer,
  MapLayer,
  Marker,
  Polygon,
  Polyline,
  Rectangle,
  StreetViewPanorama,
} from '@gmap-vue/v3/components';

Exported components

Export	Global plugin name	Purpose
MapLayer	GmvMap	Base Google Map component.
Marker	GmvMarker	Advanced Marker on the map.
InfoWindow	GmvInfoWindow	Info window anchored to a marker or position.
Autocomplete	GmvAutocomplete	Places autocomplete input wrapper.
Circle	GmvCircle	Circle overlay.
Polygon	GmvPolygon	Polygon overlay.
Polyline	GmvPolyline	Polyline overlay.
Rectangle	GmvRectangle	Rectangle overlay.
KmlLayer	GmvKmlLayer	KML layer.
HeatmapLayer	GmvHeatmapLayer	Heatmap layer.
StreetViewPanorama	GmvStreetViewPanorama	Standalone Street View panorama.
Cluster	GmvCluster	Marker clustering component.
DrawingManager	GmvDrawingManager	Legacy Drawing Library wrapper.

Typing component refs

These exports are Vue components, not Google Maps classes. When you need a component ref in TypeScript, use Vue component typing.

import { ref } from 'vue';
import { MapLayer } from '@gmap-vue/v3/components';

const mapRef = ref<InstanceType<typeof MapLayer> | null>(null);

For direct Google Maps instances, prefer the composables from @gmap-vue/v3/composables, such as useMapPromise and useMarkerPromise.