Map Location Picker Plugin

Map Location Picker Plugin for Storyblok

This is a submission for the Storyblok Challenge

Demo

Code Repository:

GitHub – storyblok-get-location-plugin

Demo Video or Screenshots

Watch the demo on YouTube

What I Built

I created a Storyblok Field Plugin that makes adding real-world locations as easy as typing an address. Powered by the Google Maps Geocoding API, editors can search for a place, see it instantly pinned on a map, and automatically store clean location data — latitude, longitude, and formatted address — into their Storyblok content.

No complex setup. No copying coordinates from Google. Just search, pin, and go.

It’s a lightweight plugin for a heavyweight need. Whether it’s contact pages, store locators, event listings, or any content that benefits from geographic context, this solves a common problem with minimal friction.

The goal wasn’t to reinvent maps. It was to take something almost every site needs and make it feel like a native part of the Storyblok editing experience. I wanted location data to be just another field — not a separate workflow.

It’s simple by design — and that’s the point.

Getting Started

1. Clone the repository

git clone https://github.com/your-username/storyblok-map-location-plugin.git
cd storyblok-map-location-plugin

2. Deploy the plugin to Storyblok

npm run deploy --workspace=get-location

3. Follow the Prompts

It will ask for your Storyblok Personal Access Token.
You can create one at:

• Storyblok → My Account → Personal Access Tokens
• Make sure the token has permission to manage your space and plugins.

4. Add the plugin to a Block

1. Go to your Storyblok Space
2. Open or create a component
3. Add a new field:
   • Type: custom
   • Plugin: Select your deployed plugin (e.g., get-location)

4. Save the schema

5. You can use the following code to implement the visual UI of the data:
   

.address-map-iframe {
  width: 100%;
  height: 280px;
  border: none;
  display: block;
  border-bottom: 1px solid #e5e7eb;
}

.map-wrapper {
  border-radius: 8px;
  overflow: hidden;
}

.address-map-text {
  padding: 1rem 0.5rem;
  font-size: 0.95rem;
  color: #374151;
  font-family: system-ui, sans-serif;
  margin: 0;
}

.address-map-fallback {
  font-size: 0.875rem;
  color: #9ca3af;
  font-style: italic;
  margin: 1rem 0;
}

export default function AddressMap({ blok }) {
  if (!blok?.address_view?.embedUrl || !blok?.address_view?.formatted_address) {
    return <p className="address-map-fallback">Address not found</p>;
  }

  return (
    <div className="map-wrapper">
      <iframe
        className="address-map-iframe"
        loading="lazy"
        src={blok.address_view.embedUrl}
        title="Google Maps Location"
        referrerPolicy="no-referrer-when-downgrade"
        allowFullScreen
      ></iframe>
    </div>
  );
}

Tech Stack

• Frontend Plugin: React + Vite
• Framework/Platform: Storyblok Field Plugin SDK (iframe-based integration)
• Design System: Custom CSS mimicking Blok.ink (Storyblok Design System)
• Input & Button Components: Styled to match SbTextField and SbButton
• Cloud Function: Firebase Functions for address-to-coordinate resolution
• Maps API: Google Maps Geocoding API (called via Firebase Function)
• UX Behavior: Debounced search, cooldown logic, and loading indicator
• Preview Feature: Google Maps iframe showing selected location
• State Management: React useState for managing form and result states

How I Used Storyblok

• Registered the plugin as a custom field type using the Field Plugin UI
• Used useFieldPlugin() to sync data between the Visual Editor and plugin iframe
• Saved structured data such as:

{
  lat: number
  lng: number
  formatted_address: string
  embedUrl: string
}