jekyll-map — a static Mapbox map of downtown Griffin, GA embedded with a single Liquid tag. Supports Mapbox and Google Static Maps.

Open Source Plugin ∙ 20 August, 2026

jekyll-map

A Jekyll plugin that provides a map Liquid tag for embedding static map images from Mapbox or Google Maps with no JavaScript required.

jekyll-map is a Jekyll plugin that embeds a static map image anywhere in your Jekyll site with a single tag. It outputs a plain <img> element with no JavaScript. Supports both Mapbox Static Images and Google Static Maps as providers.

Demo

The map below shows 100 S Hill Street in downtown Griffin, Georgia, geocoded at build time from the address string using Mapbox:

100 S Hill Street, Griffin, Georgia

{% map "100 S Hill Street, Griffin, GA" zoom=16 width=800 height=800 %}

Switch to Google Static Maps per-tag with provider=google:

{% map "100 S Hill Street, Griffin, GA" provider=google style=hybrid zoom=16 %}

Why This Exists

If you write about places — neighborhoods, projects, events, real estate, local government — you often want a quick map. Existing options either require JavaScript embeds or send your readers to a third-party page. jekyll-map outputs a plain image that works everywhere, loads fast, and needs no client-side code.

Source Code

GitHub: github.com/jchance/jekyll-map
RubyGems: rubygems.org/gems/jekyll-map

Installation

Add to your Gemfile:

gem "jekyll-map", "~> 0.2"

Add to _config.yml:

plugins:
  - jekyll-map

map:
  provider: mapbox        # or google
  zoom: 13
  mapbox:
    token: pk.your_public_access_token_here
    style: streets
  google:
    key: AIzaSy...

Then run bundle install.

Usage

By address string (geocoded at build time, cached in _map_cache.json):

{% map "City Hall, Griffin, GA" zoom=15 %}

By latitude and longitude:

{% map lat=33.248329 lng=-84.263336 zoom=16 %}

With style and size options:

{% map lat=33.748 lng=-84.388 style=satellite zoom=16 width=1200 height=500 %}
{% map "Atlanta, GA" marker=false style=light alt="Atlanta metro area" %}

Override provider per tag:

{% map "Griffin, GA" provider=google style=hybrid zoom=14 %}
{% map lat=33.248329 lng=-84.263336 provider=mapbox style=outdoors %}

Supported Parameters

Parameter	Default	Description
`lat`	—	Latitude (required if no address string)
`lng`	—	Longitude (required if no address string)
`zoom`	`13`	Zoom level (0-22)
`width`	`800`	Image width in pixels
`height`	`400`	Image height in pixels
`marker`	`true`	Show a marker at the center
`style`	`streets`	Map style (see below)
`provider`	config value	Override provider: `mapbox` or `google`
`alt`	`"Map"`	Alt text for the `<img>` tag

Mapbox styles

streets, satellite, outdoors, light, dark

Google map types

roadmap, satellite, terrain, hybrid

Styling

The plugin outputs an <img> with the class jekyll-map:

.jekyll-map {
  width: 100%;
  height: auto;
  border-radius: 4px;
}