{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block content %}
    <h2>{% trans "Institutions List" %}</h2>
    <hr>
    <div id="map_canvas" style='width: 900px; height: 600px; margin: 20px;'></div>

    <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script src="{% static 'map/gmaps_list_institution.js' %}" type="text/javascript"></script>
    <script src="{% static 'map/gmaps_marker_cluster.js' %}" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var location_data_from_django = {{ locations | safe }};
            initMap(location_data_from_django, "{{ markerClusterImageUrl | safe }}");
        });
    </script>
{% endblock content %}