@licuido-ui/ui_map v0.0.2

Map

Map - which is related to googlemap ,we can customize the routes, direction and places but google api key is must !

Author

• @author Arunachalam R arunachalam@crayond.co

Link

Story Book Link Map

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_map

Import component

import { Map } from '@licuido-ui/ui_map';

Usage

You can pass the location (Latitude and Longitude) for finding the places

<Map
  googleMapApiKey=''
  location={[
    {
      name: 'Adayar',
      location: {
        lat: 13.003387,
        lng: 80.255043,
      },
      address: 'Adyar is a large neighbourhood in south Chennai, Tamil Nadu, India',
      image: './assets/adayar.jpg',
      pinnedIcon: './assets/pinned.svg',
    },
  ]}
  locations={locations}
  center={{
    lat: 12.956786921292327,
    lng: 80.25718652012615,
  }}
 
/>

Image

Map width Route

googleMapApiKey - googleMapApiKey is must for Routes!

You can pass the origin (start) and destination (end) to find the Route Direction

<Map
   start={ lat: 13.003387, lng: 80.255043 }
   end= { lat: 12.95790649960084, lng: 80.26010930368109 }/>

Samplecode

<Map
   googleMapApiKey=''
  location={[
    {
      name: 'Adayar',
      location: {
        lat: 13.003387,
        lng: 80.255043,
      },
      address: 'Adyar is a large neighbourhood in sout Chennai, Tamil Nadu, India',
      image: './assets/adayar.jpg',
      pinnedIcon: './assets/pinned.svg',
    },
  ]}
  locations={locations}
  center={{
    lat: 12.956786921292327,
    lng: 80.25718652012615,
  }}
  start= { lat: 13.003387, lng: 80.255043 }
  end= { lat: 12.95790649960084, lng: 80.26010930368109 }
  mapStyles= {
      height: '100%',
      width: '100%',
    }
  RadiusStyle={{}}
  markerLabelStyle= {{}}
  calculatebtnStyle={{}}
  mapRadiusIcon=''
  radiusDistance={1200000000}
  zoom={13}
  isSearchRequired={false}
  setDefaultRoute={false}
  fullscreenControl
  mapTypeControl={false}
  onMarkerClick={()=>onMarkerClick()}
  onMarkerMouseOver={()=>onMarkerMouseOver()}
  onClearRoute={()=>onClearRoute()}
  onCalculateRoutes={()=>onCalculateRoutes()}
  onMarkerClustererClick={()=>onMarkerClustererClick()}
  onMarkerMouseOut= {()=>onMarkerMouseOut()}
/>

Props