{% 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 -->
      {# djlint:off H021,H013 #}
      <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>
      {# djlint:on #}
    {% 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.error("{{ 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 %}