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-gmap
Then 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;