Tz-map NPM | npm.io

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