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

{% block api_js %}
    <!-- Google Maps API javascript -->
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
{% endblock %}

{% block html %}
    <!-- HTML map container -->
    <div id="map-canvas-{{ map.pk }}"
         style="width: {{ width }}px; height: {{ height }}px;"
         class="easy-map-googlemap">
         {% block noscript %}
         <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 }}x{{ height }}&sensor=false">
         </noscript>
         {% endblock noscript %}
    </div>
{% endblock %}

{% block map_js %}
    <!-- 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>
{% endblock %}

{% endwith %}
{% endwith %}