# x-cite-google-maps

> first package

Latest version **1.0.1** (published 2019-09-04) · 0 weekly downloads

## Install

```sh
npm install x-cite-google-maps
pnpm add x-cite-google-maps
yarn add x-cite-google-maps
bun add x-cite-google-maps
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-09-04 |
| First published | 2019-09-04 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jameleddine |
| Maintainers | jameleddine |
| Keywords | maps, react-google-maps, x-cite, marker |

## Links

- npm: https://www.npmjs.com/package/x-cite-google-maps
- npm.io page: https://npm.io/package/x-cite-google-maps

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^16.8.0
- [webpack](https://npm.io/package/webpack.md) ^2.6.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.9.0
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.4.0
- [react-google-maps](https://npm.io/package/react-google-maps.md) ^9.4.5
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.2.1
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1

## Recent versions

- 1.0.1 (latest) — 2019-09-04
- 1.0.0 — 2019-09-04

## README

# x-cite-google-maps


x-cite-google-maps is a reactjs package, helps you to use google maps into any reactjs app with many features

  - Custom Markers
  - Custom infoWindow popups
  - Points


### Installation

x-cite-google-maps requires Reactjs v15+ to run.


```sh
$ npm install x-cite-google-maps
```
```sh
$ yarn add x-cite-google-maps
```

then import the package into the used component

```
import MapsDemoXcite from 'x-cite-google-maps'
```
### Configuration

x-cite-google-maps is currently extended with the following plugins. Instructions on how to use them in your own application are linked below.
```sh
 <MapsDemoXcite points={points} config={mapConfig.key} styles={style}
  />
 ```
#### points object should looks like this:
 const points = [
    {lat: 54.2, lng: -4.6, info:{key11:"value 11", key12: "value12", key13:"value13"},icon:"http://maps.google.com/mapfiles/ms/icons/red-dot.png" },
    {lat: 53.2, lng: -4.7, info:{key21:"value 21", key12: "value22", key13:"value23" }},
    {lat: 52.2, lng: -4.8, info:{key21:"value 31", key12: "value32", key13:"value33" }}
  ]
  
#### the key object need to be defined:

const mapConfig = {
  key: '**********'
};
#### and some styles for the container:

const style = {
  width: '100%',
  height: '536px'
}

---
_Source: https://npm.io/package/x-cite-google-maps · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._