Jekyll Maps

Jekyll Maps is a Jekyll plugin that embeds Google Maps with filterable, clustered location points into any page of a Jekyll site.

What is Jekyll Maps?

Jekyll Maps is an open-source Ruby gem and Jekyll plugin that adds a google_map Liquid tag to your site. It accepts location data from page front matter, posts, custom collections, or data files and renders a Google Map with markers. The plugin requires a Google Maps JavaScript API key, which you configure in _config.yml. It was created by ayastreb and is distributed under the MIT License.

Key Features

• Flexible data sources — Locations can come from YAML front matter, documents in collections, or data files in _data directories; the src attribute lets you point to a specific folder like _posts/2016 or _data/my_points.
• Multiple locations per post — Front matter may contain a single location object or an array of objects with latitude, longitude, optional title, image, and URL.
• Filterable maps — Add attributes such as lang="en" to a google_map tag to show only locations whose documents have matching front-matter values.
• Marker clustering — Google Maps Marker Clusterer is enabled by default to group nearby markers; you can disable it globally in _config.yml using maps.google.marker_cluster.enabled: false or per tag with no_cluster.
• Customizable dimensions — Set width and height on the tag, and assign a custom CSS class via class for styling.
• Direct marker placement — Pass latitude, longitude, marker_title, marker_img, and marker_url attributes to create a single-marker map without external data.
• Installation via Gemfile — Add gem 'jekyll-maps' and list it in the plugins array in _config.yml.

Who is it for?

• Jekyll site owners who need to display location markers without hand-coding JavaScript map initialization.
• Travel and event bloggers who want to map posts by adding latitude and longitude to post front matter.
• Developers building location-based Jekyll sites who need to pull location data from collections or data files and apply filters.
• Static site users who prefer a simple Liquid-tag workflow over maintaining separate map widgets.

What can you do with Jekyll Maps?

• Travel bloggers: embed a map on a page showing markers for every post tagged with a certain location or year by using src="_posts/2016".
• Business directories: load store or office locations from a _data sub-folder and display them on a map page.
• Event sites: show venues from a collection, filter by language or other metadata, and take advantage of clustering when venues are dense.

How does Jekyll Maps work?

First, add the gem to your Gemfile and _config.yml. Next, obtain a Google Maps JavaScript API key and set it under maps.google.api_key. Then add location data to front matter or data files, and insert {% google_map %} in a template. The plugin reads the location data, applies any filters, and renders a Google Map with the configured dimensions.

Pricing

Jekyll Maps is released under the MIT License, so it is free to use, copy, and distribute.

FAQ

Do I need a Google API key to use Jekyll Maps?

Yes, you must have a Google Maps JavaScript API key. Add it to _config.yml under maps.google.api_key. The plugin will not render maps without a valid key.

How do I add multiple locations to one post?

In your post's YAML front matter, define location as a list of objects, each with latitude and longitude. You can optionally include title, image, and url for each marker.

Can I load locations from data files instead of posts?

Yes, use src="_data/my_points" in the google_map tag to load location entries from all data files in that sub-folder.

Is marker clustering always on?

Marker Clusterer is enabled by default. To turn it off globally, set maps.google.marker_cluster.enabled: false in _config.yml, or add no_cluster to an individual tag to disable it for that map.

Does Jekyll Maps support custom marker icons?

Yes, each marker can have a custom image. When defining locations in front matter or data files, include an image property; when placing a single marker directly in the tag, use marker_img.