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;