## Google Maps

Google Maps along with CRUD implementations
Demo
Enter the Maps API key here when our default key exceeds its limit
Load Maps
Required Imports
import { LibMapModule } from 'nextsapien-component-lib';
Here is how to import Maps module
`{{ importCode }}`
Example usage
`{{ mapCode }}`
Properties

Type | Name | Description | Data type | Required | Default | Demo
--- | --- | --- | --- | --- | --- | ---
Input | disableNotification | Flag to enable or disable notifications. | boolean | false | false |
Input | markers | Array of map markers as MapMarkerModel objects. | MapMarkerModel[] | false | [] | {{ demoMarkers }}
Input | initialLocation | Initial geographical location as PositionModel. | PositionModel | false | DEFAULT_POSITION | {{ initialLocationDemo }}
Input | mapType | Type of map to display, defined by google.maps.MapTypeId. | google.maps.MapTypeId | false | undefined | google.maps.MapTypeId.ROADMAP
Input | enableDrag | Boolean to enable or disable dragging of map markers. | boolean | false | false |
Input | locations | Array of location strings. | string[] | false | [] | n/a
Input | searchMapsString | Search string used for querying map locations. | string | false | n/a |
Input | mapOptions | Google Maps options. | google.maps.MapOptions | false | DEFAULT_MAP_OPTIONS | n/a
Input | directions$ | Observable stream of map directions. | Observable 'google.maps.DirectionsResult' | false | n/a | n/a
Input | directionRenderOptions | Options for rendering directions on the map. | google.maps.DirectionsRendererOptions | false | {{ polyOptions }} | n/a
Output | mapActionEvent | Emits various map-related events through a single output. The 'type' field in the emitted event defines which action occurred, while other fields carry the relevant data. | MapActionEvent | false |  |
Output | mapLoaded | Emits a boolean when the map is fully loaded.
Output | markerClick | Emits the marker object when a marker is clicked.
Output | markerUpdated | Emits an array of markers when the markers are updated.
Output | mapsAlertsEvent | Emits alerts related to the map (e.g., location added/deleted).
Output | updatedLocations | Emits updated location strings after a location change.
Output | setMapsSearch | Emits the search string for map searches.
Output | setDeleteLocationIndex | Emits the index of the location to be deleted.
Output | setEditLocationIndex | Emits the index of the location to be edited.
Output | mapClick | Emits a Google Maps mouse event when the map is clicked.

## mapActionEvent

The mapActionEvent is emitted with various types of actions, each distinguished by the type field. The payload of the event contains relevant data for each action.
Below is the detailed description of each possible action.

### Properties

Field | Type | Required | Description
--- | --- | --- | ---
type | MapActionTypes | Yes | Determines the type of action being emitted.
mapLoaded | boolean | No | True when the map has fully loaded.
markerClick | MapMarkerModel | No | Contains the clicked marker's data.
markerUpdated | MapMarkerModel[] | No | An array of updated markers.
mapsAlertsEvent | MapsAlertModel | No | Contains the details of any map-related alerts.
updatedLocations | string[] | No | An array of updated location names.
setMapsSearch | string | No | Search string for filtering map results.
setDeleteLocationIndex | number | No | Index of the location to be deleted.
setEditLocationIndex | number | No | Index of the location to be edited.
mapClick | google.maps.MapMouseEvent | No | Data from a click event on the map.
mapCenterChanged | google.maps.LatLngLiteral | No | The new center position of the map.

## Example usage

HTML

Typescript

## Action Types and Associated Fields:

### 1. mapLoaded

Type: MapActionTypes.MapLoaded

Description: Emitted when the map has fully loaded. The mapLoaded field in the event payload is set to true.

Field | Type | Required | Description
--- | --- | --- | ---
type | MapActionTypes.MapLoaded | Yes | The action type for the map loading event.
mapLoaded | boolean | No | Set to true when the map is loaded.

### Example

### 2. markerClick

Type: MapActionTypes.MarkerClick

Description: Emitted when a marker is clicked. The markerClick field in the event payload contains the clicked marker's data.

Field | Type | Required | Description
--- | --- | --- | ---
type | MapActionTypes.MarkerClick | Yes | The action type for the marker click event.
markerClick | MapMarkerModel | No | Contains the clicked marker's data.

### Example

### 3. markerUpdated

Type: MapActionTypes.MarkerUpdated

Description: Emitted when markers are updated. The markerUpdated field in the event payload contains the array of updated markers.

Field | Type | Required | Description
--- | --- | --- | ---
type | MapActionTypes.MarkerUpdated | Yes | The action type for the marker update event.
markerUpdated | MapMarkerModel[] | No | An array of updated marker data.

### Example

### 4. mapsAlertsEvent

Type: MapActionTypes.MapsAlertsEvent

Description: Emitted when a map alert event occurs. The mapsAlertsEvent field in the event payload contains details of the alert.

Field | Type | Required | Description
--- | --- | --- | ---
type | MapActionTypes.MapsAlertsEvent | Yes | The action type for map alerts.
mapsAlertsEvent | MapsAlertModel | No | Contains the alert details for the map event.

### Example

### 5. updatedLocations

Type: MapActionTypes.UpdatedLocations

Description: Emitted when the map's locations are updated. The updatedLocations field in the event payload contains the array of updated location names or IDs.

Field | Type | Required | Description
--- | --- | --- | ---
type | MapActionTypes.UpdatedLocations | Yes | The action type for location updates.
updatedLocations | string[] | No | An array of updated location names or IDs.

### Example

### 6. setMapsSearch

Type: MapActionTypes.SetMapsSearch

Description: Emitted when a search string is set for map filtering or searching. The setMapsSearch field in the event payload contains the search string.

Field | Type | Required | Description
--- | --- | --- | ---
type | MapActionTypes.SetMapsSearch | Yes | The action type for setting the search string.
setMapsSearch | string | No | The search string to filter map data.

### Example

### 7. setDeleteLocationIndex

Type: MapActionTypes.SetDeleteLocationIndex

Description: Emitted when a specific location index is selected for deletion. The setDeleteLocationIndex field in the event payload contains the index of the location to be deleted.

Field | Type | Required | Description
--- | --- | --- | ---
type | MapActionTypes.SetDeleteLocationIndex | Yes | The action type for deleting a location.
setDeleteLocationIndex | number | No | The index of the location to be deleted.

### Example

### 8. setEditLocationIndex

Type: MapActionTypes.SetEditLocationIndex

Description: Emitted when a specific location index is selected for editing. The setEditLocationIndex field in the event payload contains the index of the location to be edited.

Field | Type | Required | Description
--- | --- | --- | ---
type | MapActionTypes.SetEditLocationIndex | Yes | The action type for editing a location.
setEditLocationIndex | number | No | The index of the location to be edited.

### Example

### 9. mapClick

Type: MapActionTypes.MapClick

Description: Emitted when a click event occurs on the map. The mapClick field in the event payload contains the details of the map mouse event, such as the location where the click occurred.

Field | Type | Required | Description
--- | --- | --- | ---
type | MapActionTypes.MapClick | Yes | The action type for map click events.
mapClick | google.maps.MapMouseEvent | No | Details of the map click event, including the location where the click occurred.

### Example

### 10. mapCenterChanged

Type: MapActionTypes.MapCenterChanged

Description: Emitted when the center of the map changes. The mapCenterChanged field in the event payload contains the new center coordinates of the map as a LatLngLiteral object.

Field | Type | Required | Description
--- | --- | --- | ---
type | MapActionTypes.MapCenterChanged | Yes | The action type for map center change events.
mapCenterChanged | google.maps.LatLngLiteral | No | The new center coordinates of the map.

### Example