GmapVue

The mapElement factory is an internal utility used to create Vue component options for Google Maps elements. It automates the lifecycle of a Google Maps object within a Vue component, including:

1. Initialization: It waits for the $mapPromise to resolve before initializing the underlying Google Maps object.
2. Property Mapping: It maps Vue props to the underlying Google Maps instance using mappedProps.
3. Event Binding: It binds Google Maps events to Vue component methods via the events configuration.
4. Lifecycle Hooks: It provides beforeCreate and afterCreate hooks to allow custom logic during the instantiation of the map element.
5. Cleanup: It automatically calls .setMap(null) on the instance during the Vue destroyed lifecycle hook to prevent memory leaks, provided the instance supports it.

Note: This is a low-level factory function. For standard usage, refer to the high-level component APIs provided by @gmap-vue/v3 or @gmap-vue/v2.

// Example of the configuration object structure passed to mapElement
const options = {
  name: 'myElement',
  ctr: () => MyGoogleMapsClass,
  ctrArgs: (options, props) => [/* args for constructor */],
  mappedProps: { /* mapping logic */ },
  events: { /* event bindings */ },
  props: { /* Vue props */ },
  beforeCreate: (options) => { /* logic before instantiation */ },
  afterCreate: (instance) => { /* logic after instantiation */ }
};

The mapElement factory is an internal utility used to create Vue components that wrap Google Maps elements. It automates the lifecycle of a Google Maps object within a Vue component, including:

1. Initialization: It waits for the $mapPromise to resolve, then initializes the Google Maps object using a provided constructor (ctr).
2. Property Mapping: It maps Vue props and mappedProps to the underlying Google Maps instance.
3. Event Binding: It binds specified events to the Google Maps instance.
4. Lifecycle Hooks: It supports beforeCreate (runs before the instance is created, can be asynchronous) and afterCreate (runs after the instance is created).
5. Cleanup: It automatically calls .setMap(null) on the instance during the destroyed lifecycle hook to prevent memory leaks, provided the object supports it.

Note: This is a low-level factory function. For specific API usage, refer to the documentation for mapElement utilities.

// Example of the structure expected by mapElement
const componentOptions = mapElement({
  name: 'myElement',
  ctr: () => google.maps.Marker,
  ctrArgs: (options) => [options],
  props: { /* Vue props */ },
  mappedProps: { /* Mapping logic */ },
  events: { /* Event listeners */ },
  beforeCreate: (options) => { /* Async setup */ },
  afterCreate: (instance) => { /* Post-creation setup */ }
});

The GmvMap component provides two distinct slots for placing components inside the map area. Choosing the correct slot depends on whether your component needs to be visible on top of the map or if it is a map-layer component that interacts directly with the Google Maps API.

1. The Default Slot

Components placed in the default slot are wrapped in a class that sets display: none;.

• When to use: Use this for standard map components (like markers or polylines) that interact directly with the Google Maps object. These components are rendered by the Google Maps API itself and do not rely on the HTML visibility of the slot.
• When to avoid: Do not use this for UI elements like toolboxes, search bars, or custom controls that you want the user to see.

2. The "visible" Slot

This slot is designed to display content within the responsive wrapper for the map.

• When to use: Use this for custom controls, toolboxes, or any UI elements that should be visible on top of the map.
• When to avoid: It is not required for standard map components whose UI is handled by the Google Maps API.