@s-ui/sui-map-google

MapGoogle

Simple bindings to the Google Maps API using React. Most of the components provided by this library are wrappers of react-google-maps-api

Installation

$ npm install @s-ui/sui-map-google

Usage

Map

Render a map. Toggle between a static map image and a dynamic map using isInteractive prop. The dynamic map is a wrapper of GoogleMap but also loads Google Maps script out of the box. Use loaderNode and errorNode to optionally display loading and error states. All the props defined in the wrapped component are also available.

import MapGoogle from '@s-ui/sui-map-google'

const MapGoogleExample = () => {
  return <MapGoogle apiKey="AIzaSyDp7wqS1IyRZCvMMsY2LX2V1TXY4Lh8UGA" />
}

Add-ons

Render a set of add-ons on the dynamic map setting the following components as children of MapGoogle.

• Marker
• Circle
• Polygon
• Polyline
• Rectangle

import MapGoogle from '@s-ui/sui-map-google'
import MapGoogleMarker from '@s-ui/sui-map-google/lib/marker/index.js'

const MapGoogleAddOnsExample = () => {
  return (
    <MapGoogle apiKey="AIzaSyDp7wqS1IyRZCvMMsY2LX2V1TXY4Lh8UGA">
      <MapGoogleMarker position={{lat: 40.714728, lng: -73.998672}} />
    </MapGoogle>
  )
}

MapImage

Render a static map image. Similar to MapGoogle it requires the apiKey prop. The rest of the props are the parameters defined in the Maps Static API documentation (e.g. center and zoom).

import MapGoogleImage from '@s-ui/sui-map-google/lib/image/index.js'

const MapGoogleImageExample = () => {
  return (
    <MapGoogleImage
      apiKey="AIzaSyDp7wqS1IyRZCvMMsY2LX2V1TXY4Lh8UGA"
      center="40.714728,-73.998672"
      zoom="12"
      size="600x600"
      alt="Mapa"
      width="600"
      height="600"
    />
  )
}

Import the styles (Sass)

@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/sui-map-google/lib/index';

Find full description and more examples in the demo page.