# tz-map

> This plugin is to be used by tranzak **SAAS** mini programmes to enable users pick locations from map and should would return gps coordinates

Latest version **0.0.19** (published 2025-08-01) · 0 weekly downloads

## Install

```sh
npm install tz-map
pnpm add tz-map
yarn add tz-map
bun add tz-map
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.19 |
| Published | 2025-08-01 |
| First published | 2023-04-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 74.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rollandsaf1, tranzak-cameroon, anselayuk, lucien_donald, tz_akwo |

## Links

- npm: https://www.npmjs.com/package/tz-map
- npm.io page: https://npm.io/package/tz-map

## Dependencies (1)

- [vue-easy-lightbox](https://npm.io/package/vue-easy-lightbox.md) ^1.16.0

## Recent versions

- 0.0.19 (latest) — 2025-08-01
- 0.0.18 — 2025-07-21
- 0.0.17 — 2023-10-11
- 0.0.16 — 2023-05-26
- 0.0.15 — 2023-05-26
- 0.0.14 — 2023-05-26
- 0.0.13 — 2023-05-26
- 0.0.12 — 2023-05-26
- 0.0.11 — 2023-05-26
- 0.0.10 — 2023-05-26
- 0.0.9 — 2023-05-26
- 0.0.8 — 2023-05-26
- 0.0.7 — 2023-05-26
- 0.0.6 — 2023-05-26
- 0.0.5 — 2023-05-26
- … 4 more at https://npm.io/package/tz-map/versions

## README

# Tranzak map component

This plugin is to be used by tranzak **SAAS** mini programmes to enable users pick locations from map and should would return gps coordinates


## Usage
### Installation
    npm install tz-map
In your `main.js` file, import and register the plugin as shown below

    import  {  createApp  }  from  'vue'
    import  TzMap from  'tz-map';
    const  myApp  =  createApp(App);
    myApp.use(TzMap);
    myApp.mount('#app')

 ### Implementation
    <tz-popup v-model:show="showMap" style="width: 100%;height: 100vh; padding: 10px;" :closeable="false">
        <div class="text-center" style="display: flex; justify-content: center; align-items: center; min-height: 82.5vh; overflow: auto; color: #333; padding: 10px">
            <div class="w-100">
                <tz-map @location-picked="locationUpdated" :cords="address" lang="fr"></tz-map>
            </div>
        </div>
        <div class="text-center" style="padding: 20px; padding-bottom: 10px">
            <tz-button size="large" color="#990099" round @click="showMap = false">
            Done
            </tz-button>
        </div>
    </tz-popup>


    
    <tz-button  @click="showMap  =  true">Login</tz-button>

## Props


|Prop            |Description                    | Value|    
|----------------|-------------------------------|----------|
|`lang`        |This is the language to be used when rendering th component    | `String` (`en` OR `fr`), default `en` |
| cords | This is used if you already had some predefined GPS coordinates and want them to be selected when map is rendered. | `Object`: {lat: `Number`, lng: `Number`}
|`render-counter` | This is used in cases where you have two addresses using the same map component and would like to preview each address when showing map | `Number` 

## Events


|Event                |Description                      | Return type
|---------------------|---------------------------------------------------|-
|`@location-picked`  |This is emitted when the user  picks a point on the map or searches and selects a location  | `Object` : {lat: `Number`, lng: `Number`}
|`@close-map` |This is emitted when the map is unable to load and user refuses to retry. | `Boolean`: true

---
_Source: https://npm.io/package/tz-map · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._