Typescript

Google Maps provides type definitions via @types/google.maps.

While v3-gmaps was built using these types, we created our own simplified types that are more Vue-friendly and reduce overhead when passing objects as component props.

Type Imports

v3-gmaps exports all the types you need for working with the library:

import { 
  // Common types
  GmPosition,
  GmBounds,
  
  // Pin/Marker styling
  GmPin,
  GmPinStyle,

  // Special types
  GmMapTypeId,
  GmClusterItem,
  GmClusterGroup,
  GmInfoWindowOpenOptions,
  GmWeightedPosition,
  GmStrokePosition,
  
  // Component prop types
  GmMapProps,
  GmMarkerProps,
  GmCircleProps,
  GmRectangleProps,
  GmPolygonProps,
  GmPolylineProps,
  GmInfoWindowProps,
  GmClusterProps,
  GmHeatmapProps,
  
  // Component event types
  GmMapEvents,
  GmMarkerEvents,
  GmCircleEvents,
  GmRectangleEvents,
  GmPolygonEvents,
  GmPolylineEvents,
  GmInfoWindowEvents,
  GmClusterEvents,
  GmHeatmapEvents,
  
  // API options
  GmApiOptions
} from 'v3-gmaps'

Using Component Props and Events

You can import component prop and event types for use in your own components:

<script setup lang="ts">
import { ref } from 'vue'
import { gmMap } from 'v3-gmaps'
import type { GmPosition } from 'v3-gmaps'

// Typed refs
const center = ref<GmPosition>({ lat: 37.7749, lng: -122.4194 })
const zoom = ref(12)

// Typed event handler
const onMapClick = (position: GmPosition | null) => {
  if (position) {
    console.log(`Map clicked at: ${position.lat}, ${position.lng}`)
  }
}
</script>