# Map Component

The prop `settings` can be included, it supports any Styled System API prop

```javascript
<Map
  apiKey={API_KEY}
  defaultZoom={4}
  defaultCenter={[-24.0092604, -56.2386781]}
  language="en"
  transportation={transportation}
  highlights={highlights}
  settings={{ width: [1 / 2], height: '600px' }}
/>
```

## Transportation

`type` supports only `ship`, `car` and `airplane`. For airplanes and ships is
available custom icons, adding an image path using the key `icon`

```javascript
[
  {
    type: 'car',
    path:
      'z|gkEngdnLjV_GzC|sAhU`Cq@thEdlAhcKeaEhaBcpA`mA_r@fiHlaCbqNjEdmJ{wBjfDvNjnCqXpbA}uCfyDke@~iBsi@`nGhq@hdAdYnjDi_A`oKcoBbwIayIh{UifFlnEw|DzqAksBtxAclK~}IyhD~zHcuAne@chD{Pwe@ydAsiAcAkcDveEmiBvu@vMlkAil@hvB',
  },
  {
    type: 'ship',
    path: [
      {
        lat: 50.03826,
        lng: 8.562163,
      },
      {
        lat: -12.046374,
        lng: -77.0427934,
      },
    ],
  },
  {
    type: 'airplane',
    path: [
      {
        lat: -16.4090474,
        lng: -71.537451,
      },
      {
        lat: -13.53195,
        lng: -71.9674626,
      },
    ],
  },
  {
    type: 'airplane',
    icon: 'https://image.flaticon.com/icons/svg/2058/2058472.svg',
    path: [
      {
        lat: -16.4090474,
        lng: -71.537451,
      },
      {
        lat: -13.53195,
        lng: -71.9674626,
      },
    ],
  },
];
```

## Highlights

The prop `isOnlyMarker,` can add a title inside the marker

```javascript
[
  {
    coordinates: {
      lat: -12.046374,
      lng: -77.04279,
    },
    title: 'Lima',
    isOnlyMarker: false,
    label: '2',
  },
  {
    coordinates: {
      lat: -14.0875,
      lng: -75.763336,
    },
    title: 'Huacachina',
    isOnlyMarker: true,
    label: '3',
  },
];
```