{% extends "base.html" %}

{% block header_includes %}
    {{ block.super }}
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}javascript/jquery.ui.map.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            var myLocation = $("#my_location_map");
            myLocation.gmap({
                'center': '{{ location.location.coords.1 }},{{ location.location.coords.0 }}',
                'zoom': 15
            });
            myLocation.gmap('addMarker', {
                'position': '{{ location.location.coords.1 }},{{ location.location.coords.0 }}',
            });
        });
    </script>
{% endblock %}

{% block content %}
    <h1>{{ location.source.name }} at {{ location.date }}</h1>
    <div id="my_location_map" style="width: 100%; height: 350px;">
    </div>
{% endblock %}