Google map in your blog posts

2 mins
maps embed

Here is an easy way to add Google maps to your blog, using the Google Map Embed API.

Run the usual command to create a new post:

new post

Add some Google Map Embed API variables to your page front-matter YAML:

location:         Buckingham Palace, London, UK
maptype:          satellite
zoom:             18

Then add the following template partial to your post/page:

{{>.app/templates/html/_google_map}}

Save and build your page, then finally, view your page in a browser.

You should see a "place map", like this one:

You get a "Place map" by default, but there are different types!

Advanced usage

Optional parameters

These parameters are supported by all map types:

  • center: lat,long
  • maptype: "roadmap" or "satellite"
  • region: a 2 character region code (for choosing preferred disputed borders)
  • zoom: Number 0 to 21

Here's the approximate level of detail you'll see at each zoom level:

  • 1: World
  • 5: Landmass/continent
  • 10: City
  • 15: Streets
  • 20: Buildings

Note, your maps will automatically respect your pages language variable in the front-matter, which must contain a 2 letter language code, such as en.

The mapmode parameter

There are various map "modes", each with a different set of required parameters.

If not using place mode, you should define a mapmode in your front-matter:

  • mapmode: view - locate place by lat,long, minimal popups
  • mapmode: directions - search for directions
  • mapmode: search - show icons on map for search term like "shops in London"
  • mapmode: streetview - requires lat,long and pano params, shows a street view

Place map (mapmode: place)

Shows a map, with place name in a panel, top-left, and other GUI elements (like the one on this page).

Required parameters:

  • location: place name [string]

View map (mapmode: view)

A simpler map than a "place map" (above), with fewer GUI elements.

Required parameters:

  • center: lat,long

Directions map (mapmode: directions)

Required parameters:

  • origin: place name [string] or lat,long
  • destination: place name [string] or lat,long

Optional parameters for directions maps:

  • waypoint: place name [string] or lat,long
  • mode: "driving", "walking", "bicycling", "transit" or "flying"
  • avoid: "tolls|ferries|highways"
  • units: "metric" or "imperial"

Example:

mapmode:          directions
mode:             walking
origin:           Buckingham Palace, London, UK
destination:      10 Downing Street, London, UK
avoid:            tolls|ferries|highways
zoom:             10
maptype:          roadmap

And you're done..

Search map (mapmode: search)

Required parameters:

  • location: search term [string]

The full list of Google Map API options can be found at Google Maps Embed: Getting Started - optional parameters

blog sc0ttj