aritrakrbasu/payload-google-map-autocomplete-places

A plugin for payload cms for google maps auto complete

Google Maps Autocomplete plugin

Note This plugin is currently under active development and still in an early stage. Check the roadmap below in this readme for more details / upcoming features.

Installation

The most recent version of payload-google-autocomplete-places currently only supports Payload 2.0 and up.

$ yarn add payload-google-autocomplete-places
$ npm i payload-google-autocomplete-places

Basic usage

import { CollectionConfig } from "payload/types";
import { googleMapAutoCompletePlaces } from "payload-google-autocomplete-places";

const Examples: CollectionConfig = {
  slug: "examples",
  admin: {
    useAsTitle: "title",
  },
  fields: [
    {
      name: "title",
      type: "text",
    },
    ...googleMapAutoCompletePlaces({
      apiKey: "", //<google maps API Key Goes Here>
      name: "google_location",
      label: "Google Location",
    }),
  ],
};

Detailed usage (with all props)

import { CollectionConfig } from "payload/types";
import { googleMapAutoCompletePlaces } from "payload-google-autocomplete-places";

const Examples: CollectionConfig = {
  slug: "examples",
  admin: {
    useAsTitle: "title",
  },
  fields: [
    {
      name: "title",
      type: "text",
    },
    ...googleMapAutoCompletePlaces({
      apiKey: "", //<google maps API Key Goes Here>
      name: "google_location",
      label: "Google Location",
      required: true,
      minLengthAutocomplete: 3,
      autocompletionRequest: {
        bounds: [
          { lat: 50, lng: 50 },
          { lat: 100, lng: 100 },
        ],
        componentRestrictions: {
          country: ["us", "ca", "uy"],
        },
      }, //Note: for more information check google documentation(https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest).

      debounce: 400,
      apiOptions: { language: "fr", region: "fr" }, //Note: for more information check google documentation(https://developers.google.com/maps/documentation/javascript/localization).
      withSessionToken: true, //If this prop is set to true, the component will handle changing the sessionToken on every session. To learn more about how this works refer to Google Places Session Token docs(https://developers.google.com/maps/documentation/places/web-service/session-tokens)
      admin: {
        description: "Please pick a location",
        disabled: false,
        hidden: false,
        position: "sidebar",
        readOnly: false,
        placeholder: "Please select a location",
      },
      access: {
        create: () => true,
        read: () => true,
        update: () => true,
      },
      latLng: {
        showFields: true,
        name: "latlng",
        label: "location coordinates",
        required: true,
        admin: {
          description: "Auto populated location coordinates",
          disabled: false,
          hidden: false,
          position: "sidebar",
        },
        access: {
          create: () => true,
          read: () => true,
          update: () => true,
        },
      },
    }),
  ],
};

Roadmap

Upcoming Features / Ideas. Have a suggestion for the plugin? Feel free to open an issue or contribute!

• [] Payload 3.0 support
• [] Adding Unit test for each component
• [] Add Maps pointer preview