webapp/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Photo Spots</title>
        <style type="text/css">@import url(map.css);</style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="common.js"></script>
        <script type="text/javascript">
            var map, infoWindow, geocoder, lastMarker;

            $(function() {
                initMap();
                detectLocation(function(location) {
                    map.setCenter(new google.maps.LatLng(location.coords.latitude, location.coords.longitude));
                });
            });

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: new google.maps.LatLng(59.4, 24.7),
                    zoom: 10
                });
                infoWindow = new google.maps.InfoWindow();
                geocoder = new google.maps.Geocoder();

                $.get('/rest/photo-spots', function(spots) {
                    for (var i = 0; i < spots.length; i++) {
                        addMarker(spots[i]);
                    }
                });

                google.maps.event.addListener(map, 'click', function(event) {
                    showNewSpotForm(event.latLng);
                });

                google.maps.event.addListener(infoWindow, 'closeclick', removeStaleMarker);
            }

            function addMarker(spot) {
                return spot.marker = new google.maps.Marker({position: toLatLng(spot), map: map, title: spot.name});
            }

            function editSpot(spot) {
                function option(value, name) { return {value: value, name: name} }
                var form = $('#editTemplate').tmpl(spot);
                infoWindow.setContent(form.html());
                infoWindow.open(map, spot.marker);
            }

            function showNewSpotForm(latLng) {
                var location = {latitude: latLng.lat(), longitude: latLng.lng()};
                var spot = {name:'', location:location};
                removeStaleMarker();
                lastMarker = addMarker(spot);
                editSpot(spot);

                geocoder.geocode({latLng: latLng}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var address = results[0].formatted_address;
                        address = address.substring(0, address.indexOf(','));
                        $('#editForm input[name=name]').val(address);
                    }
                });
            }

            function saveSpot(form) {
                $.post(form.action, $(form).serializeArray(), function(spot) {
                    removeStaleMarker();
                    addMarker(spot);
                    infoWindow.close();
                });
            }

            function removeStaleMarker() {
                if (lastMarker) lastMarker.setMap(null);
            }

            function toLatLng(spot) {
                return new google.maps.LatLng(spot.location.latitude, spot.location.longitude);
            }
        </script>
    </head>

    <body>
        <div id="container">
            <div id="header">
                <h1>Great Photo Spots</h1>
            </div>

            <div id="content">
                <div id="map">Detecting location...</div>
            </div>
        </div>

        <div id="editTemplate" style="display:none">
            <div>
                <form id="editForm" action="/rest/photo-spots" method="POST">
                    <h3>New photo spot:</h3>
                    <table>
                        <tr>
                            <td>Name:</td>
                            <td>
                                <input type="text" name="name" value="${name}">
                                <input type="hidden" name="lat" value="${location.latitude}">
                                <input type="hidden" name="lon" value="${location.longitude}">
                            </td>
                        </tr>
                        <tr>
                            <td>Description:</td>
                            <td>
                                <textarea name="description">${description}</textarea>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td class="buttons">
                                <input type="button" onclick="saveSpot(this.form); return false;" value="Save">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>

    </body>
</html>