@blueeast/bluerain-plugin-web-gmap

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

• pluginName string "WebGMapPlugin"
• slug string "web-google-map"

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;