{% extends "templates/base-1-col.html" %}

{% block post-css %}
<style>
  .page-header {
    padding-bottom: 0;
  }
</style>
{% endblock %}

{% block content-body %}
    <div id="map" style="height: 100%; min-height:500px;"></div>
{% endblock %}

{% block post-scripts %}
<script>
  function initMap() {
    var mapElement = document.getElementById('map');
    var mapOptions = {
      center: {lat: {{ map-data.starting-lat }}, lng: {{ map-data.starting-long }} },
      zoom: {{ map-data.starting-zoom }},
      {% if map-data.disable-map-gui %}disableDefaultUI: {{ map-data.disable-map-gui }},{% endif %}
      styles: {{ map-data.style-json|safe }}
    };
    var map = new google.maps.Map(mapElement, mapOptions);
    {% block kml %}
    var kmlOptions = {
      preserveViewport: false,
      map: map
    };
    var kmlSrc = 'http://forgotten.roads.mx{{ map-data.gis-base }}{{ map-data.kml-file }}?rev={{ map-data.revision }}';
    var kmlLayer = new google.maps.KmlLayer(kmlSrc, kmlOptions);
    {% endblock %}
  }
</script>
<script src="{{ map-data.google-endpoint }}?key={{ map-data.google-api-key }}&rev={{ map-data.revision }}&callback=initMap"
         async defer></script>
{% endblock %}