{% extends 'admin/change_form.html' %}

{% block extrahead %}{{ block.super }}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUVMGp6Uks8OCczFfrWo20zHnmENyW5O0&v=3.exp&sensor=false&libraries=places">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script> 
   
function initialize()
{
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        mapTypeId: google.maps.MapTypeId.SATELLITE
    });
    var defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-33.8902, 151.1759),
        new google.maps.LatLng(-33.8474, 151.2631));
    map.fitBounds(defaultBounds);
    
    var myLatLng = new google.maps.LatLng(-33.8902, 151.1759);

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        draggable: true,
        visible: false,
        clickable: true,
    });

    google.maps.event.addListener(map, 'click', function(ev) {
            marker.setVisible(true);
            marker.setPosition(ev.latLng);
            info(ev.latLng.lat(), ev.latLng.lng());
    });


    google.maps.event.addListener(map, 'bounds_changed', function(){
        var bounds = map.getBounds();
    });

}

google.maps.event.addDomListener(window, 'load', initialize);

function info(lat, long) {
    $("#id_latitude").val(lat);
    $("#id_longitude").val(long);
}

function addr(ad) {
    $("#id_address_normalized").val(ad);
}

</script>

{% endblock %}

{% block extrastyle %}{{ block.super }}
<style>
    #target
    {
        width: 345px;
    }
    @media print {
      html, body {
        height: auto;
      }
    }

</style>
{% endblock %}

{% block content %}{{ block.super }}
        <div id="map_canvas" style="width:100%; height: 600px"></div>
{% endblock %}
