google.pug – Embed Google Maps

View source code on Github

---

In order to use the next mixins, you need to follow next steps:

1. Go to Maps Javascript API Google’s documentation and get an API key. You can start the process for obtain it clicking on GET STARTED button.
2. In your API’s google dashboard you must enable next APIs:
   • Google Maps Embed API
   • Google Maps Javascript API
   • Google Maps Static API

Note

Mixins explained in this page are covering Google Maps Embed API Documentation and there is the relation between mixins and maps types:

• google-map-view(): view mode.
• google-map-place(): place mode.

---

Common parameters

+google-map-*(key)(maptype="roadmap")

All google maps mixins share some common parameters like:

Arguments:

• key (string) – Your API key. Don’t forget to enable Google Maps APIs as explained above because if aren’t enabled, the iframe will not be displayed.
• maptype (string, optional) –

  As default, "roadmap". You can selected between 2 styles of map:

  • "roadmap": View of predetermined road map.
  • "satellite": View of satellital images of Google Earth.

---

Embed maps by places

mixin google-map-place(query, key)
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  - if (query.length == 27 && query.indexOf(["+"]) < 1)
    - query = "place_id:" + query
  - else
    - query = query.replace(/ /g, "+");
  iframe(src=`https://google.com/maps/embed/v1/place?key=${key}&q=${query}`
         frameborder="0"
         width="100%"
         height="450")&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+google-map-place(query, key)(maptype="roadmap")

Insert a Google map given a place string like "Eiffel Tower,Paris France" or by place identificator.

Arguments:

• query (string) – Place string or place identificator. You can pass it with spaces and the mixins will be responsible of replace all with "+" characters.
• key (string) – See Common parameters.
• maptype (string, optional) – See Common parameters.

Usage

Input

+google-map-place("Eiffel Tower,Paris France", "AIzaSyAYBpeIr5j02T63_xtKTs3l5vC8eLsNqqI")

Output

<iframe src="https://google.com/maps/embed/v1/place?key=AIzaSyAYBpeIr5j02T63_xtKTs3l5vC8eLsNqqI&q=Eiffel+Tower,Paris+France" frameborder="0" width="100%" height="450">Your browser does not support iframes.</iframe>

Render

---

Embed maps by coordinates

mixin google-map-view(center, zoom, key)
  - if ("alt" in attributes)
    - alt = attributes.alt;
    - delete attributes.alt;
  - else
    - alt = true;
  - if ("maptype" in attributes)
    - maptype = attributes.maptype;
    - delete attributes.maptype;
  - else
    - maptype = "roadmap";
  - src = `https://google.com/maps/embed/v1/view?key=${key}&center=${center}&zoom=${zoom}&maptype=${maptype}`
  - if ("language" in attributes)
    - src = src + `&language=${attributes.language}`;
    - delete attributes.language;
  - if ("region" in attributes)
    - src = src + `&region=${attributes.region}`;
    - delete attributes.region;
  iframe(frameborder="0"
         width="100%"
         height="450"
         src=`${src}`)&attributes(attributes)
    - if (alt)
      | Your browser does not support iframes.

+google-map-view(center, zoom, key)(maptype="roadmap", language=null, region=null, width="100%", height="450")

Insert a Google map given location coordinates, a zoom distance and API key parameters. You can configure also map visualization type displayed when iframe content is loaded.

Arguments:

• center (string) – Coordinates separatted by a comma. These can be obtained navigating through maps at maps.google.com. You can see in the url the coordinates at the right of a @ symbol. The parameter in the url that contains a z caracter is the zoom (see parameter).
• zoom (float, string) – The higher will be this value, the distance to the earth will be less and viceversa.
• key (string) – See Common parameters.
• maptype (string, optional) – See Common parameters.
• language (string) – Defines the language to use for UI elements and for the display of labels on map tiles. By default, visitors will see a map in their own language.
• region (string) – defines the appropriate borders and labels to display, based on geo-political sensitivities. Accepts a region code specified as a two-character ccTLD (top-level domain) value.

Usage

Input

+google-map-view("36.0135723,-5.6080321", 9.5, "AIzaSyAYBpeIr5j02T63_xtKTs3l5vC8eLsNqqI")(maptype="satellite")

Output

<iframe frameborder="0" width="100%" height="450" src="https://www.google.com/maps/embed/v1/view?key=AIzaSyAYBpeIr5j02T63_xtKTs3l5vC8eLsNqqI&center=36.0135723,-5.6080321&zoom=9.5&maptype=satellite"></iframe>

Render