Jekyll Maps
Easily embed GoogleMaps with locations from your Jekyll posts or data files.
Jekyll Maps is a plugin that allows you to easily create different maps on your Jekyll site pages. It allows you to select which points to display on the map with different filters.
GoogleMaps Marker Clusterer can be used if you have many points within close proximity.
1. Add the following to your site’s Gemfile:
gem 'jekyll-maps'
2. Add the following to your site’s _config.yml:
gems:
- jekyll-maps
To be able to use Google Maps you need to obtain API Key.
Once you have your API Key you need to add it to Jekyll’s _config.yml:
maps:
google:
api_key: <YOUR_KEY>
First, add location information to your posts YAML front-matter:
# _posts/2016-01-01-post.md
location:
latitude: 51.5285582
longitude: -0.2416807
Alternatively, you can add location info to your custom collection’s documents or even in data files:
# _data/places.yaml
- title: "Paris"
url: "http://google.fr"
location:
latitude: 48.8587741
longitude: 2.2074741
- title: "Madrid"
url: "http://google.es"
location:
latitude: 40.4378698
longitude: -3.8196204
If your post has an image in its front-matter data, this image will be used as a content for the popup when marker is clicked.
Otherwise simple “View” text link will be placed in the popup.
By default this plugin will display location from the page it’s placed on:
{% google_map %}
But you can use src attribute to load locations from other places, like posts, collections or data files!
For example, this map will show locations from all posts from 2016:
{% google_map src="_posts/2016" %}
This map will show locations from a collection called ‘my_collection’:
{% google_map src="_collections/my_collection" %}
This map will show locations from all data files located in ‘my_points’ sub-folder:
{% google_map src="_data/my_points" %}
You can configure map’s dimensions and assign custom CSS class to the element:
{% google_map width="100%" height="400" class="my-map" %}
You can also filter which locations to display on the map!
For instance, following tag will only display locations from posts which have lang: en in their front-matter data.
{% google_map src="_posts" lang="en" %}
By default Marker Clusterer is enabled. If you have many markers on the map, it will group them and show icon with the count of markers in each cluster - see example.
If you don’t want to use marker cluster, you can disable it globally in _config.yml:
maps:
google:
marker_cluster:
enabled: false
Or you can disable it per single map tag:
{% google_map no_cluster %}
Location is taken from current page YAML front-matter data.
Marker on-click popup is disabled with show_popup attribute.
{% google_map show_popup="false" zoom="10" %}
If you just want to display area map without any markers on it, use show_marker attribute.
{% google_map show_marker="false" zoom="10" %}
You can specify location coordinates and marker details directly on map attributes.
{% google_map
zoom="10"
latitude="40.4378698"
longitude="-3.8196204"
marker_title="Madrid!"
marker_url="https://en.wikipedia.org/wiki/Madrid" %}
You can set custom marker icon for all markers on the map.
{% google_map
src="_data/europe"
marker_icon="https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png" %}
Or you can specify custom marker icon in location.
# _data/custom_marker.yml
- title: "New York Streets 1"
data_set: "02"
location:
latitude: 40.755965
longitude: -73.994175
marker_icon: https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png
- title: "New York Streets 2"
data_set: "02"
location:
latitude: 40.747296
longitude: -73.9762767
{% google_map
src="_data/custom_marker.yml"
marker_icon="https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png" %}
You can use src attribute to specify where plugin should look for locations.
It can be data files, collections or posts.
{% google_map src="_data/europe" %}
{% google_map src="_data/cluster" %}
Same data set as in previous example, but without marker cluster.
{% google_map src="_data/cluster" no_cluster %}