GoogleMap

A wrapper around the React Google Maps Component with styles applied. The following components are available in addition to map component:

This map component requires that the Google Maps library be included in the <head> your HTML with a valid API key.

NOTE: If you want to have restrictions (postal_code, country) please use <Autocomplete /> Component instead of <Searchbox />

For restriction options in <Autocomplete /> pass options prop.

const options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

For types option you can't allow multiple restrictions

As Autocomplete for places and addresses states in general only a single type is allowed. The exception is that you can safely mix the geocode and establishment types, but note that this will have the same effect as specifying no types

Examples

Standard Map

<GoogleMap
  containerElement={<div style={{ height: '300px' }} />}
  mapElement={<div style={{ height: '100%' }} />}
/><GoogleMap
  containerElement={<div style={{ height: '300px' }} />}
  mapElement={<div style={{ height: '100%' }} />}
/>

Markers

<GoogleMap
  containerElement={<div style={{ height: '300px' }} />}
  mapElement={<div style={{ height: '100%' }} />}
>
  <Marker position={{ lat: 30.263637, lng: -97.785586 }} />
</GoogleMap><GoogleMap
  containerElement={<div style={{ height: '300px' }} />}
  mapElement={<div style={{ height: '100%' }} />}
>
  <Marker position={{ lat: 30.263637, lng: -97.785586 }} />
</GoogleMap>

Polygons

<GoogleMap
  containerElement={<div style={{ height: '300px' }} />}
  mapElement={<div style={{ height: '100%' }} />}
  defaultZoom={13}
>
  <Polygon
    options={{
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
    }}
    path={[
      { lat: 30.263242, lng: -97.799917 },
      { lat: 30.268506, lng: -97.791406 },
      { lat: 30.259073, lng: -97.779164 },
      { lat: 30.257311, lng: -97.782909 },
      { lat: 30.261167, lng: -97.787458 },
      { lat: 30.258572, lng: -97.79278 },
      { lat: 30.252085, lng: -97.785366 },
      { lat: 30.245894, lng: -97.7975 },
      { lat: 30.254939, lng: -97.805654 },
      { lat: 30.257015, lng: -97.802135 },
    ]}
  />
</GoogleMap><GoogleMap
  containerElement={<div style={{ height: '300px' }} />}
  mapElement={<div style={{ height: '100%' }} />}
  defaultZoom={13}
>
  <Polygon
    options={{
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
    }}
    path={[
      { lat: 30.263242, lng: -97.799917 },
      { lat: 30.268506, lng: -97.791406 },
      { lat: 30.259073, lng: -97.779164 },
      { lat: 30.257311, lng: -97.782909 },
      { lat: 30.261167, lng: -97.787458 },
      { lat: 30.258572, lng: -97.79278 },
      { lat: 30.252085, lng: -97.785366 },
      { lat: 30.245894, lng: -97.7975 },
      { lat: 30.254939, lng: -97.805654 },
      { lat: 30.257015, lng: -97.802135 },
    ]}
  />
</GoogleMap>

MapDraw

Before importing add drawing to the libraries from where you reference google API URL

Import MapDraw from real-react and place inside your GoogleMap

onComplete - Callback function executed when the drawing is complete to handle coordinates

mode - POLYGON by Default. Choose from CIRCLE, POLYGON,POLYLINE, RECTANGLE