Lava Shortcode - Google Static Map
Description
Display a static Google Map image without needing complex configuration.
Documentation
This shortcode returns a static map (think Google Map as an image) based on parameters you provide. Let's look at a simple example.
{[ googlestaticmap center:'10451 W Palmeras Dr Sun City, AZ 85373-2000' zoom:'12' ]}
{[ endgooglestaticmap ]}
Here's we're showing a simple map centered around the address we provided at a reasonable zoom level. Note that you could
also provide the center point as a lat/long if you prefer.
So, what about markers, yep you can do that too. Notice when you use makers you don't have to provide a center point or zoom.
{[ googlestaticmap ]}
[[ marker location:'33.640705,-112.280198' ]] [[ endmarker ]]
[[ marker location:'1 Cardinals Dr, Glendale, AZ 85305' ]] [[ endmarker ]]
{[ endgooglestaticmap ]}
Note here we provided both a lat/long and a street address. Either is just fine. With the markers, you can also
provide it other options. Here are your options:
- location – The location (address) of the pin as either an address or lat,long pair.
- precision (optional for use with lat/long location) - Used to reduce the number of decimal places of the location lat/long to obscure the exact position.
- color – The color of the pin, can be a basic color from the list below or a 24-bit color in the pattern of 0xFFFFFF.
(black, brown, green, purple, yellow, blue, gray, orange, red, white).
- size – The size of the pin (valid values include: tiny,mid,small)
- label - The letter or number that you want on the pin.
- icon – The url to the png file to use for the pin icon.
Now that we have the pins taken care of let's look at the other options you can place on the shortcut:
- returnurl (false) – By default the returned map will be in an image tag with a div to wrap it. Setting returnurl to 'true'
will return just the URL (say for adding it as a background image).
- width (100%) – The image will be added to a responsive div. The setting allows you to set the width of the div to a percent or px.
- imagesize – The size of the image to get from the Google API. If you are using the free API you are limited to 640x640, though you can actually double
that if you set the scale = 2. If you buy the premium plan that size goes up to 2048x2048.
- maptype (roadmap) – This determines the type of map to return. Valid values include roadmap, satellite, hybrid, and terrain.
- scale (1) – This effects the number of pixels that are returned (usually used for creating high DPI images (aka retina). You can use this though to
double the size of the 640px limit. Valid values are 1 or 2 or 4 (4 requires the premium plan).
- zoom (optional if used with markers) – The zoom level of the map. This must be value between 1-20. Below is a rough idea of the scales:
- 1 = world
- 5 = continent
- 10 = city
- 15 = streets
- 20 = buildings
- center (optional if used with markers) – The center point of the map. Can be either a street address or lat/long.
- format (png8) – The format type of the image that is returned. Valid values include png8, png32, gif, jpg, jpg-baseline.
- style (optional) – The returned map can be styled in an infinite (or close to) number of ways. Use commas to delimit multiple styles. See the Google Static Map documentation for
details (https://developers.google.com/maps/documentation/static-maps/styling).
Markup
{% assign apiKey = 'Global' | Attribute:'GoogleApiKey' %}
{% if apiKey == "" %}
<div class="alert alert-warning">
There is no Google API key defined. Please add your key under: 'Admin Tools > General Settings > Global Attributes > Google API Key'.
</div>
{% endif %}
{% assign url = 'https://maps.googleapis.com/maps/api/staticmap?' | Append:'size=' | Append:imagesize | Append:'&maptype=' | Append:maptype | Append:'&scale=' | Append:scale | Append:'&format=' | Append:format -%}
{% if zoom != '' -%}
{% assign url = url | Append:'&zoom=' | Append:zoom %}
{% endif -%}
{% if center != '' -%}
{% assign center = center | EscapeDataString -%}
{% assign url = url | Append:'¢er=' | Append:center %}
{% endif -%}
{% if style != '' -%}
{% assign styleItems = style | Split:',' -%}
{% for styleItem in styleItems -%}
{% assign url = url | Append:'&style=' | Append:styleItem %}
{% endfor -%}
{% endif -%}
{% assign markerCount = markers | Size -%}
{% assign markersContent = '' %}
{% for marker in markers -%}
{% assign markerContent = '' %}
{% if marker.color and marker.color != '' -%}
{% assign markerContent = markerContent | Append:'color:' | Append:marker.color -%}
{% endif -%}
{% if marker.icon and marker.icon != '' -%}
{% assign markerContent = markerContent | Append:'icon:' | Append:marker.icon -%}
{% endif -%}
{% if marker.size and marker.size != '' -%}
{% assign markerContent = markerContent | Append:'|size:' | Append:marker.size -%}
{% endif -%}
{% if marker.label and marker.label != '' -%}
{% assign markerContent = markerContent | Append:'|label:' | Append:marker.label -%}
{% endif -%}
{% comment %}
// If given, handle adjusting the precision on a given lat and long
{% endcomment %}
{% assign mLocation = marker.location %}
{% if marker.precision and marker.precision != '' %}
{% capture precision %}0.{% for i in (1..marker.precision) %}0{% endfor %}{% endcapture %}
{% assign latLong = marker.location | Split:',' %}
{% assign latLongSize = latLong | Size %}
{% if latLongSize == 2 %}
{% capture mLocation %}{{ latLong[0] | AsDecimal | Format:precision }},{{ latLong[1] | AsDecimal | Format:precision }}{% endcapture %}
{% endif %}
{% endif %}
{% assign markerContent = markerContent | Append:'|' | Append:mLocation | Trim -%}
{% assign markerContent = markerContent | EscapeDataString -%}
{% assign markersContent = markersContent | Append:'&markers=' | Append:markerContent -%}
{% endfor -%}
{% assign url = url | Append:markersContent -%}
{% assign url = url | Append:'&key=' | Append:apiKey -%}
{% assign returnurl = returnurl | AsBoolean %}
{% if returnurl %}
{{ url }}
{% else %}
<div style="width: {{ width }}">
<img src="{{ url }}" style="width: 100%" />
</div>
{% endif %}