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

{% block api_js %}
  <script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ api_key }}"></script>
{% endblock %}

{% block html %}
  <!-- HTML map container -->
  <div id="map-canvas-{{ map.pk }}"
    {% if map.computed_address %}
      style="width: {{ width|default:"320" }}px; height: {{ height|default:"240" }}px;"
    {% endif %}
    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 %}<!-- geocoding error -->{% endif %}
  </div>
{% endblock %}

{% block map_js %}{% if map.computed_address %}
  <!-- Map creation script -->
  <script type="text/javascript">
    function initialize_map_{{ map.pk }}() {
        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 %}
    }

    {% block map_loading_js %}
        // initialize the map after page loading
        google.maps.event.addDomListener(window, 'load', initialize_map_{{ map.pk }});
    {% endblock %}
  </script>
{% endif %}{% endblock %}

{% endwith %}{% endwith %}