Untitled

<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
var map, marker, waypointByID = {}, currentObject, geocoder;

function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: new google.maps.LatLng(41.879535, -87.624333),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    geocoder = new google.maps.Geocoder();
}

{% for waypoint in waypoints %}
waypointByID[{{waypoint.id}}] = {
    name: "{{waypoint.name}}",
    lat: {{waypoint.geometry.y}},
    lng: {{waypoint.geometry.x}}
};
{% endfor %}

$(document).ready(function () {
    function activateWaypoints() {
        // Add waypoint click handler
        $('.waypoint').each(function () {
            $(this).click(function() {
                var waypoint = waypointByID[this.id];
                var center = new google.maps.LatLng(waypoint.lat, waypoint.lng);
                currentObject = $(this);
                if (marker) marker.setMap();
                marker = new google.maps.Marker({map: map, position: center, draggable: true});
                google.maps.event.addListener(marker, 'dragend', function() {
                    var position = marker.getPosition();
                    waypoint.lat = position.lat();
                    waypoint.lng = position.lng();
                    currentObject.html(waypoint.name +
                        ' (' + waypoint.lat +
                        ', ' + waypoint.lng + ')');
                    $('#saveWaypoints').removeAttr('disabled');
                });
                map.panTo(center);
            }).hover(
                function () {this.className = this.className.replace('OFF', 'ON');},
                function () {this.className = this.className.replace('ON', 'OFF');}
            );
        });
    }
    function searchWaypoints() {
        geocoder.geocode({
            'address': $('#address').val()
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var position = results[0].geometry.location;
                $.get("{% url waypoints_search %}", {
                    lat: position.lat(),
                    lng: position.lng()
                }, function (data) {
                    if (data.isOk) {
                        $('#waypoints').html(data.content);
                        waypointByID = data.waypointByID;
                        activateWaypoints();
                    } else {
                        alert(data.message);
                    }
                }, 'json');
            } else {
                alert('Could not find geocoordinates for the following reason: ' + status);
            }
        });
    }
    $('#saveWaypoints').click(function () {
        var waypointStrings = [];
        for (id in waypointByID) {
            waypoint = waypointByID[id];
            waypointStrings.push(id + ' ' + waypoint.lng + ' ' + waypoint.lat);
        };
        $.post("{% url waypoints-save %}", {
            waypointsPayload: waypointStrings.join('\n')
        }, function (data) {
            if (data.isOk) {
                $('#saveWaypoints').attr('disabled', 'disabled');
            } else {
                alert(data.message);
            }
        });
    });
    $('#searchWaypoints').click(searchWaypoints);
    $('#address').keydown(function(e) {
        if (e.keyCode == 13) searchWaypoints();
    });
    activateWaypoints();
});
</script>
<style>
    body {font-family: sans-serif}
    #map {width: 500px; height: 300px}
    #waypoints {overflow: auto; width: 500px; height: 100px}
    .linkOFF {color: darkblue}
    .linkON {color: white; background-color: darkblue}
</style>
</head>
<body onload='initialize()'>
    <form enctype="multipart/form-data" method=post action="{% url waypoints-upload %}">
        {% csrf_token %}
        <input type=file name=gpx>
        <input type=submit value='Upload GPX'>
    </form>
    <div id=map></div>
    <div id=waypoints>
        {{content}}
    </div>
    <input id=saveWaypoints type=button value=Save disabled=disabled>
    <br>
    <br>
    <br>
    <input id=address value='Chicago, IL'>
    <input id=searchWaypoints type=button value='Rank waypoints by distance from address'>
</body>
</html>