react-sgl

Installation

npm install --save react-google-maps # or
yarn add react-google-maps

Use & Configuration

import { withMapConfig SGLMap, SGLMarker } from "react-sgl"

const MyMapComponent = withMapConfig((props) =>
  <SGLMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    <SGLMarker position={{ lat: -34.397, lng: 150.644 }} />
  </SGLMap>
))

<MyMapComponent
  mapsUrl: 'http://path-to-sgl/api/js.js',
  googleMapsKey: 'googlekey',
  bbox: '-48.900473,-26.252152,-48.889892,-26.243658'
/>

For simplicity, in this documentation, I will use recompose to simplify the component. It'll look something like this with recompose:

import { compose, withProps } from "recompose"
import { withMapConfig, SGLMap, SGLMarker } from "react-sgl"

const MyMapComponent = compose(
  withProps({
    mapsUrl: 'http://path-to-sgl/api/js.js',
    googleMapsKey: 'googlekey',
    bbox: '-48.900473,-26.252152,-48.889892,-26.243658'
  }),
  withMapConfig
)((props) =>
  <SGLMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    <Marker position={{ lat: -34.397, lng: 150.644 }} />
  </SGLMap>
))

<MyMapComponent isMarkerShown />

You can implement your own state transition logic with MyMapComponent!

import React from "react"
import { compose, withProps } from "recompose"
import { withMapConfig, SGLMap, SGLMarker } from "react-sgl"

const MyMapComponent = compose(
  withProps({
    mapsUrl: 'http://path-to-sgl/api/js.js',
    googleMapsKey: 'googlekey',
    bbox: '-48.900473,-26.252152,-48.889892,-26.243658'
  }),
  withMapConfig
)((props) =>
  <SGLMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    {props.isMarkerShown && <SGLMarker position={{ lat: -34.397, lng: 150.644 }} onClick={props.onMarkerClick} />}
  </SGLMap>
))

class MyFancyComponent extends React.PureComponent {
  state = {
    isMarkerShown: false,
  }

  componentDidMount() {
    this.delayedShowMarker()
  }

  delayedShowMarker = () => {
    setTimeout(() => {
      this.setState({ isMarkerShown: true })
    }, 3000)
  }

  handleMarkerClick = () => {
    this.setState({ isMarkerShown: false })
    this.delayedShowMarker()
  }

  render() {
    return (
      <MyMapComponent
        isMarkerShown={this.state.isMarkerShown}
        onMarkerClick={this.handleMarkerClick}
      />
    )
  }
}