{% extends "layout.html" %}

{% include "mapMacros.html" %}

{% block bodyClass %}{{ super() }} apos-map-index{% endblock %}

{% block subnav %}
    <ol class="children">
    {% for relative in page.children %}
      <li><a href="{{ relative.url }}">{{ relative.title | e }}</a></li>
    {% endfor %}
    </ol>
{% endblock %}

{% block main %}
  {{ renderGoogleMap(items, { markerOptions: { clickable: false }, styles: [
      {
        "stylers": [
          { "gamma": 0.88 },
          { "saturation": -45 },
          { "hue": "#00b2ff" }
        ]
      },{
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [ { "color": "#5e919a" } ]
      },{
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [ { "color": "#b4cfb5" } ]
      },{
        "featureType": "road",
        "elementType": "labels.text.stroke",
        "stylers": [ { "color": "#ffffff" } ]
      }
    ]}
  ) }}
  {{ super() }}
{% endblock %}


{% block mainContent %}
  <div class="map-content-area">
    {{ aposArea(page, 'content') }}
  </div>
  <ul class="map-locations">
    {{ renderMapLocations(items, page.url, 'map-location') }}
  </ul>
{% endblock %}