# Map

## Props
| Name        | Type                                                                                                                                             | Default                                                                                  | Required | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | -------- |   |
| apiKey      | string                                                                                                                                           | ''                                                                                       | false    | To use the Maps JavaScript API you must have an API key.<br>The API key is a unique identifier that is used to authenticate<br>requests associated with your project for usage                                                                                                                                                                                                                                                                                                                                                                                       |
| center      | {<br>  lat: number,<br>  lng: number,<br>}                                                                                                       | { lat: 47.3773697, lng: 8.3966319 }                                                      | false    | Initial Latitude and Longitude coordinates for map                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| zoom        | number                                                                                                                                           | 10                                                                                       | false    | Number that changes the scale of the map                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| markers     | Array&lt;{<br>  lat: number &#124; string,<br>  lng: number &#124; string,<br>  name: string,<br>  isLink?: boolean,<br>  url?: string,<br>}&gt; | []                                                                                       | false    | Array objects that hold data that will support in putting markers on<br>the map. Data of each item is passed props into `CustomComponent`<br>which is mapped in the inner of `<GoogleMaps>`. The data shape of each<br>item is the following:<br>- lat: (latitude position of marker)<br>- lng: (longitude position of marker)<br>- name: (name of marker)<br>- isLink: (boolean prop passed to `CustomMarkerComponent` for whatever<br>logic that component has)<br>- url: (string prop passed to `CustomMarkerComponent` for whatever<br>logic that component has) |
| markerClass | any                                                                                                                                              |                                                                                          | true     | `CustomMarkerComponent` mapped out on the Google Maps, inheriting the following<br>props:<br>- lat: (explanation above in `markers`)<br>- lng: (explanation above in `markers`)<br>- name: (explanation above in `markers`)<br>- isLink: (explanation above in `markers`)<br>- url: (explanation above in `markers`)                                                                                                                                                                                                                                                 |
| width       | string                                                                                                                                           | '100%'                                                                                   | false    | Sets width of map with any legitimate metric i.e px, vw, % etc                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| height      | string                                                                                                                                           | '100%'                                                                                   | false    | Sets height of map with any legitimate metric i.e px, vw, % etc                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| apiOptions  | Object                                                                                                                                           | {}                                                                                       | false    | object with props for custom setting for map. Object is passed into<br>`options` prop of `GoogleMap`. View [here](https://github.com/google-map-react/old-examples/blob/master/web/flux/components/examples/x_options/options_map_page.jsx)<br>for an example                                                                                                                                                                                                                                                                                                        |
| initialSize | Object&lt;InitialSizeType&gt;                                                                                                                    | {<br>  width: 800, // Map width in pixels<br>  height: 350, // Map height in pixels<br>} | false    | Object with the following shape:<br>--<br>- `width: String`: (must have legitimate metric),<br>- `height: String`: (must have legitimate metric),<br>Sets the initial size for the map before mount as it is needed                                                                                                                                                                                                                                                                                                                                                  |
