dummy-map v1.0.1

@gotitdev/google-map

Install

NPM:
npm install --save @gotitdev/google-map

YARN:
yarn add @gotitdev/google-map

Basic Usage

import React from 'react'
import { GoogleAutocomplete, GoogleMap } from '@gotitdev/google-map'

const GoogleAddress = (props) => {
  return (
    <div>
      <GoogleAutocomplete
      // apiKey and onSelect props is Required !!!
      apiKey={'S0M3AppK3y'}
      onSelect={address => console.log('Address: ', address)}
      />
      <GoogleMap
      // apiKey and markers props is Required !!!
        markers={[{
          name: 'Marker-Test',
          address: { lat: 42.1334, lng: 24.5453 }
        }]}
        apiKey={'AIzaSyDeMAvaLh-F7HBq_2MS0-mcaBgUbWyU-Ig'}
      />
    </div>
  )
}

GoogleAutocomplete Example

import React from 'react'
import { GoogleAutocomplete } from '@gotitdev/google-map'

export default () => {
  return (
   <div>
    <GoogleAutocomplete
      onSelect={address => console.log('address', address)}
      styles={{ width: 300 }}
      withLoader={true}
      label={'Адреси'}
      apiKey={'APPKEY'}
      placeholder={'Намери Адрес'}
      renderOption={option => {
        return (
          <React.Fragment>
            <span style={{background: 'red', borderRadius: '10px', margin: '10px'}}>{'Address:  '}</span>
            {option.description}
        </React.Fragment>
        )
      }}
      getOptionLabel={option => {
        return `${option.description} BG`
      }}
      inputProps={{
        variant:'outlined'
      }}
    />
   </div>
  )
}

Props

onSelect (address): function, [required],
apiKey: string, [required] // Needed for Google API,
styles: object, [optional] // Styles for Address component,
label: string, [optional] // Component label,
renderOption (option): function, [optional] // Render the option, use getOptionLabel by default
getOptionLabel (option): function, [optional] // Used to determine the string value for a given option, default is: option.description
placeholder: string, [optional] // Placeholder for input
inputProps: object, [optional] // Material UI TextField props
withLoader: bool, [optional] // Show loader when google api fetch suggestions
searchOptions: object, [optional] // Options to Google Maps API, you can override them too, default is :
  const searchOptions = {
    types: ['address'],
    componentRestrictions: {
      country: 'bg'
    },
    ...props.searchOptions
  }

GoogleMap Example

import React from 'react'
import { GoogleMap } from '@gotitdev/google-map'
import InfoBox from './InfoBox'

export default () => {
  return (
   <div>
    <GoogleMap
        mapBounds={{ lat: 44.1354, lng: 22.7453 }}
        mapZoom = {12}
        // InfoBox is a react node that will be used for displaying info when click on marker
        MarkerInfoBox={InfoBox}
        markers={[{
          name: 'Tech Shop',
          address: { lat: 42.1334, lng: 24.5453 }
        }]}
        apiKey={'AIzaSyDeMAvaLh-F7HBq_2MS0-mcaBgUbWyU-Ig'}
    />
   </div>
  )
}

Props

markers: array, [required] // Markers that will be displayed on map,
markers is array of objects, one marker has required prop as name and address, address is object with two
required props lat and lng, you can pass anything else that you need as a prop for marker, id for example.

apiKey: string, [required] // Needed for Google API.
MarkerInfoBox: node, [optional] // React component that will be used when you click on marker and that component will be displayed,
MarkerInfoBox usage is for some info modal or redirect button and etc. MarkerInfoBox will accept marker as a prop, you can extract marker name,
or anything else that contains your marker.

mapZoom: number, [optional] default: 8.
mapBounds: object, [optional] default: { lat: 42.1354, lng: 24.7453 }, Plovdiv // Map center as coordinates.

License

MIT © DEMO