jQuery(function() {
    // First create a div to host the map
    var themap = $('<div id="themap"></div>').css({
        'width': '90%',
        'height': '400px'
    }).insertBefore('ul.restaurants');

    // Now initialise the map
    var mapstraction = new Mapstraction('themap','google');
    mapstraction.addControls({
        zoom: 'large',
        map_type: true
    });

    // Show map centred on Brighton
    mapstraction.setCenterAndZoom(
        new LatLonPoint(50.82423734980143, -0.14007568359375),
        15 // Zoom level appropriate for Brighton city centre
    );

    // Geocode each hcard and add a marker
    jQuery('.vcard').each(function() {
        var hcard = jQuery(this);
    
        var streetaddress = hcard.find('.street-address').text();
        var postcode = hcard.find('.postal-code').text();
    
        var geocoder = new MapstractionGeocoder(function(result) {
            var marker = new Marker(result.point);
            marker.setInfoBubble(
                '<div class="bubble">' + hcard.html() + '</div>'
            );
            mapstraction.addMarker(marker);
        }, 'google');    
        geocoder.geocode({'address': streetaddress + ', ' + postcode});
    });
});