{% extends 'portal/base_no_userprofile.html' %}

{% block head %}

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">
        html {
            height: 100%
        }
        body {
            height: 100%;
            margin: 0;
            padding: 0
        }
        #map-canvas {
            height: 100%
        }
    </style>

    {% block script %}
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

    <script type="text/javascript">

      google.maps.event.addDomListener(window, 'load', function() {
        var map = new google.maps.Map(document.getElementById("map-canvas"), {
          center: new google.maps.LatLng(53.830115, -3.80127),
          zoom: 6,
          minZoom: 2,
          maxZoom: 10,
        });

        var markers = [];
        {% for school in schools %}

            {% if school.latitude and school.longitude %}
                markers.push(new google.maps.Marker({
                    position: new google.maps.LatLng({{ school.latitude }}, {{ school.longitude }}),
                    map: map,
                    animation: google.maps.Animation.DROP,
                }));
            {% endif %}
        {% endfor %}

        var bounds = new google.maps.LatLngBounds();
        for(i=0;i<markers.length;i++) {
         bounds.extend(markers[i].getPosition());
        }

        map.setCenter(bounds.getCenter());
        map.fitBounds(bounds);
        map.setZoom(map.getZoom()-1);
        if(map.getZoom()> 15){
          map.setZoom(15);
        }


      });
    </script>
    {% endblock script %}

{% endblock head %}

{% block content %}

    <div id="admin_map"></div>
    <div id="map-canvas" style="height: 600px"/>

{% endblock content %}
