https://github.com/waichungwong/jw-google-map

A lightweight react component for google maps.
https://github.com/waichungwong/jw-google-map

google-maps npm-module react

Last synced: 1 day ago
JSON representation

A lightweight react component for google maps.

• Host: GitHub
• URL: https://github.com/waichungwong/jw-google-map
• Owner: WaiChungWong
• License: mit
• Created: 2018-07-23T13:46:59.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-15T09:40:16.000Z (almost 6 years ago)
• Last Synced: 2024-12-23T15:40:31.710Z (about 1 month ago)
• Topics: google-maps, npm-module, react
• Language: JavaScript
• Homepage:
• Size: 778 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jw-google-map

A react component for google map.

[![NPM version][npm-image]][npm-url]

[![build status][travis-image]][travis-url]

[![node version][node-image]][node-url]

[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/jw-google-map.svg

[npm-url]: http://npmjs.org/package/jw-google-map

[travis-image]: https://img.shields.io/travis/WaiChungWong/jw-google-map.svg

[travis-url]: https://travis-ci.org/WaiChungWong/jw-google-map

[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg

[node-url]: http://nodejs.org/download/

[download-image]: https://img.shields.io/npm/dm/jw-google-map.svg

[download-url]: https://npmjs.org/package/jw-google-map

[Demo](http://waichungwong.github.io/jw-google-map/build)

## Install

[![NPM](https://nodei.co/npm/jw-google-map.png)](https://nodei.co/npm/jw-google-map)

## Static Methods

| Method      | Parameters     | Description                                                   |

| ----------- | -------------- | ------------------------------------------------------------- |

| `setAPIKey` | `api`: string. | set the API key for google map and reload the Map API script. |

## Methods

| Method         | Parameters                                                          | Description                                              |

| -------------- | ------------------------------------------------------------------- | -------------------------------------------------------- |

| `getMapCenter` |                                                                     | retrieve the lat and long of the center of the map view. |

| `setMarker`    | `position`: object consist of
{ `lat`: number, `lng`: number }. | set a marker on a given position of map.                 |

## Props

| Prop               | Description                                                  |

| ------------------ | ------------------------------------------------------------ |

| `center`(optional) | the initial center of the map. Default: `{ lat: 0, lng: 0 }` |

| `zoom`(optional)   | the initial zoom of the map. Default: `0`                    |

## Usage

```javascript

import React, { Component } from "react";

import ReactDOM from "react-dom";

import Map, { setAPIKey } from "jw-google-map";

import "./style.css";

class Demo extends Component {

  conponentDidMount() {

    setAPIKey(``);

    const { map } = this;

    const position = map.getMapCenter();

    map.setMarker(position);

  }

  render() {

    return  (this.map = m)} />;

  }

}

ReactDOM.render(, document.getElementById("root"));

```