npm package: @licuido-ui/ui_map
Description: Map - which is related to googlemap ,we can customize the routes, direction and places but google api key is must !
Latest version: 0.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](http://216.48.182.148:3333/?path=/docs/components-map--docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_map
```

## Import component

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

### Usage

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

```jsx
<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

![alt text](./assets/map.png)

### Map width Route

googleMapApiKey - googleMapApiKey is must for Routes!

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

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

## Samplecode

```jsx
<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

| **Name**                       | **Description**            | **Default**                         | **Control**                                                        |
| ------------------------------ | -------------------------- | ----------------------------------- | ------------------------------------------------------------------ |
| **mapStyles**                  | object                     | \{ height: '100%', width: '100%' \} | mapStyles : \{height : "100%"width : "100%"\}                      |
| **RadiusStyle**                | object                     | \{ \}                               | RadiusStyle : \{\}                                                 |
| **markerLabelStyle**           | object                     | \{ \}                               | markerLabelStyle : \{\}                                            |
| **calculatebtnStyle**          | SxProps&lt;\{\}&gt;        | \-                                  | calculatebtnStyle : \{\}                                           |
| **googleMapApiKey**            | string                     | ""                                  |
| **zoom**                       | number                     | 13                                  |
| **mapRadiusIcon**              | string                     | "\./assets/mapCircle\.png"          | \./assets/mapCircle\.png                                           |
| **radiusDistance**             | number                     | 1200000000                          |
| **isSearchRequired**           | boolean                    | true                                | FalseTrue                                                          |
| **deatilsCardCustomize**       | ReactNode                  | \-                                  | "Customize Card"                                                   |
| **locations**                  | locationsData\[\]          | \[\]                                | locations : \[0 : \{\.\.\.\} 5 keys\]                              |
| **center**                     | any                        | \-                                  | center : \{lat : ""lng : ""\}                                      |
| **origin**                     | latLAng                    | \{ lat: 0, lng: 0 \}                | origin : \{lat : 13\.003387lng : 80\.255043\}                      |
| **destination**                | latLAng                    | \{ lat: 0, lng: 0 \}                | destination : \{lat : 12\.95790649960084lng : 80\.26010930368109\} |
| **setDefaultRoute**            | boolean                    | true                                | FalseTrue                                                          |
| **fullscreenControl**          | boolean                    | true                                | FalseTrue                                                          |
| **searchBoxRootsx**            | SxProps&lt;\{\}&gt;        | \-                                  | searchBoxRootsx : \{\}                                             |
| **zoomControl**                | boolean                    | true                                | FalseTrue                                                          |
| **streetViewControl**          | boolean                    | true                                | FalseTrue                                                          |
| **mapTypeControl**             | boolean                    | true                                | FalseTrue                                                          |
| **onClearRoute**               | \(\) =&gt; void            | \(\) =&gt; false                    | ()=>onClearRoute()                                                 |
| **onCalculateRoutes**          | \(data: any\) =&gt; void   | \(\) =&gt; false                    | ()=>onCalculateRoutes()                                            |
| **onMarkerMouseOver**          | \(marker: any\) =&gt; void | \(\) =&gt; false                    | ()=>onMarkerMouseOver()                                            |
| **onMarkerClustererClick**     | \(e: unknown\) =&gt; void  | \(\) =&gt; false                    | ()=>onMarkerClustererClick()                                       |
| **onMarkerClick**              | \(data: any\) =&gt; void   | \(\) =&gt; false                    | ()=>onMarkerClick()                                                |
| **onMarkerMouseOut**           | \(\) =&gt; void            | \(\) =&gt; false                    | ()=>onMarkerMouseOut()                                             |
| **className**                  | string                     | \-                                  | Set string                                                         |
| **sx**                         | SxProps&lt;Theme&gt;       | \-                                  | Set object                                                         |
| **responsiveDetailsCustomize** | ReactNode                  | \-                                  | Set object                                                         |
| **deatilsCardCustomizes**      | boolean                    | \-                                  | Set boolean                                                        |
| **customCardLocation**         | any                        | \-                                  | Set object                                                         |