tz-map

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