Skip to content


Subversion checkout URL

You can clone with
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

117 lines (110 sloc) 4.26 kb
<title>What Beer To Drink Where</title>
<link href="/main.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript">
// Need to get all data on the beers.
var map;
$.getJSON('/cgi-bin/get-data.p6', function (data) {
// Set up us the map.
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(48.205456, 17.107086),
mapTypeId: google.maps.MapTypeId.ROADMAP
map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Loop over the data set and add points.
for (var i = 0; i < data.length; i++) {
add_marker(map, data[i].name, data[i].info, data[i].lat, data[i].long);
// Set up add link.
$('#add_link').click(function (event) {
$('#add_box').css('display', 'block');
$('#add_box').animate({ height: '160px' });
// Set up add button.
$('#add').click(function () {
// Geocode the location.
$('#adding').css('visibility', 'visible');
var where = $('#add_where').val();
var geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode({ 'address': where }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var lat = results[0];
var lng = results[0].geometry.location.lng();
var to_add = {
'name': $('#add_name').val(),
'info': $('#add_info').val(),
'lat': lat,
'long': lng
$.get('/cgi-bin/add.p6', to_add, function (result) {
$('#add_box').animate({ height: '1px' });
add_marker(map, $('#add_name').val(), $('#add_info').val(), lat, lng);
else {
alert("Sorry, don't know where " + where + "is. :-(");
function add_marker(map, name, info, lat, long) {
// Add marker for beer.
var pointLatlng = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
position: pointLatlng,
map: map
// Add bubble.
var content = "<h3>" + name + "</h3>" + info;
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: content
});, marker);
<div class="Header">
What Beer Where
<div class="ActionCall">
Just had a good local beer? <a href="#" id="add_link">Add it!</a>
<div id="add_box" class="Box" style="height: 0; display: none">
<label for="name">Beer Name:</label>
<input type="text" name="name" id="add_name" />
<label for="info">Description:</label>
<input type="text" name="info" id="add_info" />
<label for="where">Where:</label>
<input type="text" name="where" id="add_where" />
<input type="button" id="add" value="Add" />
<span id="adding" style="visibility: hidden">Adding...</span>
<div id="map" class="MainMap"></div>
<div class="Powered">
<img src="camelia-logo.png" alt="Butterflies like beer too!" />
Powered by <a href="">Rakudo</a> <a href="">Perl 6</a>.
Jump to Line
Something went wrong with that request. Please try again.