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

{% block html %}
    <!-- HTML map container -->
    <div id="map-canvas-{{ map.pk }}"
         {% if width and map.latitude and not map.geocode_error %}
            style="width: {{ width }}px; height: {{ height }}px;"
         {% endif %}
         class="easy-map-googlemap">
    </div>
{% endblock %}

{% block map_js %}
    <!-- Map creation script -->
    <script type="text/javascript">
        function initialize_map_{{ map.pk }}() {
            var latlng = new google.maps.LatLng({{ map.latitude|stringformat:"f" }}, {{ map.longitude|stringformat:"f" }});
            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 %}