# hf-map

> yarn add hf-map

Latest version **0.1.8** (published 2019-11-25) · 0 weekly downloads

## Install

```sh
npm install hf-map
pnpm add hf-map
yarn add hf-map
bun add hf-map
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2019-11-25 |
| First published | 2019-11-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 82.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | hfchou |

## Links

- npm: https://www.npmjs.com/package/hf-map
- Repository: https://github.com/hsiaofung/GoogleMapDialog
- Homepage: https://github.com/hsiaofung/GoogleMapDialog#readme
- Issues: https://github.com/hsiaofung/GoogleMapDialog/issues
- npm.io page: https://npm.io/package/hf-map

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^16.12.0
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.26.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.12.0
- [babel-core](https://npm.io/package/babel-core.md) ^7.0.0-bridge.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.5.5
- [hf-lightbox](https://npm.io/package/hf-lightbox.md) ^1.0.6
- [react-scripts](https://npm.io/package/react-scripts.md) 3.2.0
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.7.0
- [google-map-react](https://npm.io/package/google-map-react.md) ^1.1.5
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1

## Recent versions

- 0.1.8 (latest) — 2019-11-25
- 0.1.7 — 2019-11-25
- 0.1.6 — 2019-11-21
- 0.1.5 — 2019-11-21
- 0.1.4 — 2019-11-21
- 0.1.3 — 2019-11-21
- 0.1.2 — 2019-11-21
- 0.1.1 — 2019-11-21

## README

## install

yarn add hf-map

## component

```javascript
<GoogleMap>
```

## features

- support 國際化
- support 整頁地圖或光箱地圖(需用 ScrollableLightbox 包起來。)
- support 地圖控件，顯示街景，衛星，縮放。

## API

- license: Google map license。
- lat: 經度。
- lng: 緯度。
- text: marker 上的文字。
- lang: 語言。

## CSS

.google-map-height: 可定義地圖的高度。default 是用在光箱，若是不用光箱要自定義高度，可設 100vh，滿版，但要注意 mobile 底部可能會跑掉。

## Demo

```javascript
import React from "react";
import GoogleMap from "./GoogleMap";
import ScrollableLightbox from "hf-lightbox";

class App extends React.Component {
  state = { show: false };
  componentDidMount() {
    this.setState({
      show: true
    });
  }
  close() {
    this.setState({
      show: false
    });
  }
  render() {
    return (
      <div className="App">
        <ScrollableLightbox
          show={this.state.show}
          title="分店位置"
          close={this.close.bind(this)}
        >
          <GoogleMap
            license="/*YOUR LICNESE*/"
            lat={"25.051216"}
            lng={"121.577515"}
            lang="en"
            text={<span style={{ color: "red" }}>Here</span>}
          />
        </ScrollableLightbox>
      </div>
    );
  }
}

export default App;
```

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