{% with map.latitude|stringformat:"f" as lat %}{% with map.longitude|stringformat:"f" as long %}

{% load i18n %}

{% block map_css %}{% if not map.computed_address %}
  <style type="text/css">
    /* ------------ OVERRIDE GOOGLE MAP STYLES --------------- */
    .gm-err-container {
        height: 100%;
        width: 100%;
        display: table;
        background-color: #e0e0e0;
        position: relative;
        left: 0;
        top: 0;
    }
    .gm-err-content {
        border-radius: 1px;
        padding-top: 0;
        padding-left: 10%;
        padding-right: 10%;
        position: static;
        vertical-align: middle;
        display: table-cell;
    }
    .gm-err-icon {
        text-align: center;
    }
    .gm-err-title {
        margin: 5px;
        margin-bottom: 20px;
        color: #616161;
        font-family: Roboto,Arial,sans-serif;
        text-align: center;
        font-size: 24px;
    }
    .gm-err-message {
        margin: 5px;
        color: #757575;
        font-family: Roboto,Arial,sans-serif;
        text-align: center;
        font-size: 12px;
    }
    /* ------------END OVERRIDE GOOGLE MAP STYLES--------------- */
  </style>
{% endif %}{% endblock %}

{% block html %}
  <!-- HTML map container -->
  <div id="map-canvas-{{ map.pk }}" style="width: {{ width|default:"320" }}px; height: {{ height|default:"240" }}px; position: relative; overflow: hidden;" class="easy-map-googlemap">
    {% block noscript %}{% if map.computed_address %}
      <noscript>
        <img alt="Map of {{ map.address }}" src="https://maps.google.com/maps/api/staticmap?center={{ lat }},{{ long }}&zoom={{ zoom }}&markers={{ lat }},{{ long }}&size={{ width|default:"320" }}x{{ height|default:"240" }}&key={{ api_key }}">
      </noscript>
    {% endif %}{% endblock %}
    {% if not map.computed_address %}
      <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);"><div class="gm-err-container"><div class="gm-err-content"><div class="gm-err-icon"><img src="//maps.gstatic.com/mapfiles/api-3/images/icon_error.png" draggable="false" style="-moz-user-select: none;"></div><div class="gm-err-title">{% trans "Oops! Something went wrong." %}</div><div class="gm-err-message">{% trans "This page didn't load Google Maps correctly. See the JavaScript console for technical details." %}</div></div></div></div>
    {% endif %}
  </div>
{% endblock %}

{% block map_js %}
  <!-- Map creation script -->
  <script type="text/javascript">{% if map.computed_address %}
    var initialize_map_{{ map.pk }} = function() {
        var latlng = new google.maps.LatLng({{ lat }}, {{ long }});
        var mapElem = document.getElementById("map-canvas-{{ map.pk }}");

        {% block map_options_js %}
            var mapOptions = {
                zoom: {{ zoom }},
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        {% endblock %}

        var map = new google.maps.Map(mapElem, mapOptions);

        {% block extra_js %}
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: "{{ map.address }}"
            });
        {% endblock %}
    };
  {% else %}
    {% if map.has_exception %}console.exception("{{ map.exception|safe }}");{% endif %}
  {% endif %}</script>
{% endblock %}

{% block api_js %}
  <script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ api_key }}&language={{ language|default:"en" }}{% if map.computed_address %}&callback=initialize_map_{{ map.pk }}{% endif %}" async defer></script>
{% endblock %}
{% endwith %}{% endwith %}