1.0.3 • Published 6 years ago
@blueeast/bluerain-plugin-web-gmap v1.0.3
bluerain-plugin-web-gmap
This bluerain plugin is built on react-gmaps
Usage
Run the following command in the plugin directoy:
Installation
npm i --save @blueeast/bluerain-plugin-web-gmapThen in your boot function, pass the plugin like this:
import BR from '@blueeast/bluerain-os';
import WebGMapPlugin from '@blueeast/bluerain-plugin-web-gmap';
BR.boot({
plugin: [WebGMapPlugin]
})Components
This plugin registers following component in Component Registry.
- GMap
API
WebGoogleMapPlugin
Extends Plugin
A BlueRain Plugin built on web-gmap to View Google Maps in React apps.
Properties
Universal Props
| Name | Type | Default | Description |
|---|---|---|---|
| Region | object | The region to be displayed by the map.The region is defined by the center coordinates and the span of coordinates to display. | |
| onMarkerDragEnd | func | Callback that is called when the Mark pointer changes. |
Specific Library Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | TThe width of the map. | |
| height | string | The height of the map. | |
| zoom | number | The user able to pinch/zoom the map. | |
| draggable | boolean | If false the user can't drag the map. | |
| params | object | Params are the default object value of Google Api 'Key' and 'V' value. |
How to Use
import React from 'react';
import { BlueRainConsumer, BlueRain } from "@blueeast/bluerain-os";
const onDragEnd = (e) => {
const { latLng } = e;
lat = latLng.lat();
lng = latLng.lng();
}
const appPage = (props) => {
return (
{(BR: BlueRain) => {
<BR.Components.GMap zoom={15}
height={'500px'}
onMarkerDragEnd={onDragEnd}
region={{ latitude: lat, longitude: lng }} />
}}
)
}
export default appPage;