Merge lp:~ronnie.vd.c/loco-team-portal/570613 into lp:loco-team-portal

[Ronnie]

Google Maps are added to the pages "global event" and "venue add/update/details". The markers cant be clicked at the moment.

[lp:~ronnie.vd.c/loco-team-portal/570613]

384. By Ronnie on 2011-02-17

Added translation tags

[Michael Hall (mhall119)]

Pure awesome

review: Approve

=== modified file 'loco_directory/events/models.py'
--- loco_directory/events/models.py	2011-01-18 20:38:55 +0000
+++ loco_directory/events/models.py	2011-02-17 17:57:17 +0000
@@ -107,6 +107,9 @@
 
     def random_5_attendees(self):
         return Attendee.objects.filter(event__id__exact=self.id).order_by('?')[5:]
+        
+    def has_location(self):
+        return self.filter(venue__longitude__isnull=False, venue__latitude__isnull=False)
 
 class TeamEvent(BaseEvent):
     """
 
=== modified file 'loco_directory/events/urls.py'
--- loco_directory/events/urls.py	2010-12-19 21:25:01 +0000
+++ loco_directory/events/urls.py	2011-02-17 17:57:17 +0000
@@ -22,6 +22,7 @@
     url(r'^global/(?P<global_event_id>\d+)/detail/$', 'events.views.global_event_detail', name='global-event-detail'),
     url(r'^global/(?P<global_event_id>\d+)/delete/$', 'events.views.global_event_delete', name='global-event-delete'),
     url(r'^global/(?P<global_event_id>\d+)/update/$', 'events.views.global_event_update', name='global-event-update'),
+    url(r'^global/(?P<global_event_id>\d+)/locations/$', 'events.views.global_event_locations', name='global-event-locations'),
     url(r'^global/add/$', 'events.views.global_event_new', name='global-event-new'),
 
 )
 
=== modified file 'loco_directory/events/views.py'
--- loco_directory/events/views.py	2011-02-02 17:40:39 +0000
+++ loco_directory/events/views.py	2011-02-17 17:57:17 +0000
@@ -3,6 +3,7 @@
 from django.shortcuts import render_to_response
 from django.shortcuts import get_object_or_404
 from django.contrib.auth.decorators import login_required
+from django.utils import simplejson
 from django.utils.translation import ugettext as _
 from django.core.urlresolvers import reverse
 
@@ -471,5 +472,26 @@
         return redirect( global_event_object )
 
 
-
-
+def global_event_locations(request, global_event_id):
+    """
+    the longitude and latitude global event
+    """
+    global_event_object = get_object_or_404(GlobalEvent, pk=global_event_id)
+    locations = []
+    for event in global_event_object.teamevent_set.has_location():
+        location = {}
+        location['url'] = event.get_absolute_url()
+        location['title'] = event.name
+        # TODO: create an separate view with template for the content
+        location['content'] = '<p>Location: <a href="%s">%s</a></p><p>Start date: %s</p><p>End date: %s</p>' % (event.get_absolute_url(),
+                                                                                                                event.venue.name, 
+                                                                                                                str(event.date_begin), 
+                                                                                                                str(event.date_end))
+        location['lng'] = event.venue.longitude
+        location['lat'] = event.venue.latitude
+        locations.append(location)
+
+    json = simplejson.dumps(locations)
+
+    return HttpResponse(json)
+    
 
=== modified file 'loco_directory/media/css/newstyle.css'
--- loco_directory/media/css/newstyle.css	2011-02-03 01:43:39 +0000
+++ loco_directory/media/css/newstyle.css	2011-02-17 17:57:17 +0000
@@ -25,21 +25,9 @@
     white-space:    nowrap;
 }
 
-#venue-map-selector {
-    width:          400px;
-    height:         300px;
-    border:         1px solid #ccc;
-    position:       absolute;
-    right:          30px;
-    top:            40px;
-}
-#venue-map {
-    width:          400px;
-    border:         1px solid #CCC;
-    bottom:         10px;
-    float:          right;
-    height:         300px;
-    margin-right:   10px;
+.minor-content.venue-map {
+    min-height: 350px;
+    margin-top: 60px;
 }
 
 #main-content {
 
=== added file 'loco_directory/media/img/ajax-loader.gif'
 Binary files loco_directory/media/img/ajax-loader.gif	1970-01-01 00:00:00 +0000 and loco_directory/media/img/ajax-loader.gif	2011-02-17 17:57:17 +0000 differ
=== added file 'loco_directory/media/img/marker.png'
 Binary files loco_directory/media/img/marker.png	1970-01-01 00:00:00 +0000 and loco_directory/media/img/marker.png	2011-02-17 17:57:17 +0000 differ
=== removed file 'loco_directory/media/js/common.js'
--- loco_directory/media/js/common.js	2010-06-09 01:36:18 +0000
+++ loco_directory/media/js/common.js	1970-01-01 00:00:00 +0000
@@ -1,103 +0,0 @@
-//Click Control to get lonlat values. trigger function set the values
-OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
-    defaultHandlerOptions: {
-        'single': true,
-        'double': false,
-        'pixelTolerance': 0,
-        'stopSingle': false,
-        'stopDouble': false
-    },
-
-    initialize: function(options) {
-        this.handlerOptions = OpenLayers.Util.extend(
-            {}, this.defaultHandlerOptions
-        );
-        OpenLayers.Control.prototype.initialize.apply(
-            this, arguments
-        ); 
-        this.handler = new OpenLayers.Handler.Click(
-            this, {
-                'click': this.trigger
-            }, this.handlerOptions
-        );
-    }, 
-
-    trigger: function(e) {
-        var lonlat = map.getLonLatFromViewPortPx(e.xy);
-        $("#id_longitude").val(lonlat.lon)
-        $("#id_latitude").val(lonlat.lat)
-        map.markers.erase();
-        //alert("You clicked near " + lonlat.lat + " N, " + lonlat.lon + " E");
-    }
-
-});
-//function to add markers to map
-function addMarker(layer, lon, lat, popupContentHTML) {
-        var ll = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
-        var feature = new OpenLayers.Feature(layer, ll);
-        feature.closeBox = true;
-        feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, { minSize: new OpenLayers.Size(200, 100) });
-        feature.data.popupContentHTML = popupContentHTML;
-        feature.data.overflow = "hidden";
-
-        var marker = new OpenLayers.Marker(ll);
-        marker.feature = feature;
-
-        var markerClick = function(evt) {
-        if (this.popup == null) {
-                this.popup = this.createPopup(this.closeBox);
-                map.addPopup(this.popup);
-                this.popup.show();
-        } else {
-                this.popup.toggle();
-        }
-        OpenLayers.Event.stop(evt);
-        };
-        marker.events.register("mousedown", feature, markerClick);
-
-        layer.addMarker(marker);
-}
-
-//openlayers map
-var map;
-function showmap(divid, select, lon, lat, htmltext){
-    map = new OpenLayers.Map(divid);
-    map.addControl(new OpenLayers.Control.LayerSwitcher());
-    var gphy = new OpenLayers.Layer.Google(
-        "Google Physical",
-        {type: G_PHYSICAL_MAP}
-    );
-    var gmap = new OpenLayers.Layer.Google(
-        "Google Streets", // the default
-        {numZoomLevels: 20}
-    );
-    var ghyb = new OpenLayers.Layer.Google(
-        "Google Hybrid",
-        {type: G_HYBRID_MAP, numZoomLevels: 20}
-    );
-    var gsat = new OpenLayers.Layer.Google(
-        "Google Satellite",
-        {type: G_SATELLITE_MAP, numZoomLevels: 22}
-    );
-    var markers = new OpenLayers.Layer.Markers("Markers Layer");
-    
-    map.addLayers([gphy, ghyb, gsat, markers]);
-    if (lon === undefined && lat === undefined) {
-        map.setCenter(new OpenLayers.LonLat(0, 0), 0);
-    } else {
-        for (i=0;i<lon.length;i++) {
-                addMarker(markers, lon[i], lat[i], htmltext[i]);
-        }
-        var lonLat = new OpenLayers.LonLat(lon[0], lat[0]).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
-        map.setCenter (lonLat, 6);
-    }
-    //map.zoomToMaxExtent();
-    if (select) {
-        var click = new OpenLayers.Control.Click();
-        map.addControl(click);
-        click.activate();
-    }
-
-    
-}
-
 
=== added file 'loco_directory/media/js/jquery-ubuntu-maps.js'
--- loco_directory/media/js/jquery-ubuntu-maps.js	1970-01-01 00:00:00 +0000
+++ loco_directory/media/js/jquery-ubuntu-maps.js	2011-02-17 17:57:17 +0000
@@ -0,0 +1,373 @@
+/*
+ * jQuery Google Map Plugin 0.2.3
+ * https://wiki.ubuntu.com/ubuntu-django-foundations/map
+ * Requires jQuery 1.4.2
+ *
+ * Copyright 2011, Ronnie van den Crommenacker
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+
+(function ($) {  
+    $.fn.extend({   
+        showLocations: function (options) {
+            var defaults = {
+                    markers_url: null,          // http://link/to/json/markers or /link/to/json/markers
+                    markers_list: null,         // [ {lat: 0.345, lng: 0.3456}, {lat: 44.345, lng: 34.3456} ]
+                    position_name: {
+                        lat: 'lat',             // { lat: 0.4567, lng: 0.2345 }
+                        lng: 'lng'              // { lat: 0.4567, lng: 0.2345 }
+                    },
+                    marker_content_url: null,   // The url to load when clicked on a marker
+                    marker_content_tmpl: null,  // The template to load when clicked on a marker
+                    mapOptions: {
+                        zoom: 2,
+                        center: new google.maps.LatLng(22, 12),
+                        mapTypeId: google.maps.MapTypeId.ROADMAP,
+                        mapTypeControl: false
+                    },
+                    user_location_zoom: 7,      // use null to disable this feature
+                    single_marker_zoom: 7,      // the zoomlevel. use null to disable
+                    ajax_load_error: '<p>The page could not be loaded</p>',
+                    ajax_load_icon: '/ubuntu-website/media/images/ajax-loader.gif',
+                    marker_icon: null,
+                    cluster_tmpl: null,
+                    filter: null, //[ { element: $('...'), attrs: { attr: value }}, { element: $('...'), attrs: { attr: value }} ]
+                    mcOptions: { gridSize: 40, maxZoom: 10, zoomOnClick: false//, styles: [
+                            //{ url: 'images/supportCluster1.png', height: 48, width: 48, opt_anchor: [16, 0], opt_textColor: '#ffffff', opt_textSize: 10 }, /* 2-9 members */
+                            //{ url: 'images/supportCluster2.png', height: 64, width: 64, opt_anchor: [24, 0], opt_textColor: '#ffffff', opt_textSize: 11 }, /* 10-99 members */
+                            //{ url: 'images/supportCluster3.png', height: 96, width: 96, opt_anchor: [32, 0], opt_textColor: '#ffffff', opt_textSize: 12 }, /* 100-999 members */
+                            //{ url: 'images/supportCluster4.png', height: 128, width: 128, opt_anchor: [32, 0], opt_textColor: '#ffffff', opt_textSize: 12 }  /* 1000+ members */
+                        //]
+                    }
+                },
+                // Add the window where the details are shown when clicked on a marker
+	            infowindow = new google.maps.InfoWindow();
+	            
+            options =  $.extend(defaults, options);
+
+            // TODO: rewrite this one
+            function getAjaxLoader() {
+	            var ajaximg = $('<img src="' + options.ajax_load_icon + '" />')
+	                .attr({'style': 'display:inline-block;vertical-align:middle;margin-right:10px;'}),
+	                ajaxtxt = $('<p>')
+	                .attr({'style': 'display:inline-block;vertical-align:middle;'})
+                    .html('Retrieving data<br />from server...'),
+                    wrapper = $('<div>')
+                    .attr({'style': 'margin:auto;width:130px;'});
+	            return wrapper.append(ajaximg).append(ajaxtxt)[0];
+            }
+
+            infowindow.show = function (html, pos) {
+                this.setContent(html);
+                this.setPosition(pos);
+                this.open(this.map);
+            };
+            infowindow.ajaxloader = null;
+            infowindow.showLoader = function (pos) {
+                // Set a temporary loader while the data is retreved from the server 
+                if (this.ajaxloader === null) {
+                    // TODO: allow user defined ajax loader
+	                this.ajaxloader = getAjaxLoader();
+                }
+                this.show(this.ajaxloader, pos);
+            };
+            infowindow.showTemplate = function (url, data, pos) {
+                var $data = data,
+                    $pos = pos,
+                    ifw = this;
+                    
+                if (!$.tmpl) {
+                    alert('jQuery.tmpl is not installed\nYou can download here:\nhttp://github.com/jquery/jquery-tmpl');
+                    return false;
+                }
+                
+                this.showLoader(pos);
+                $.ajax({ 
+                    url: url, 
+                    dataType: 'html',
+                    success: function (template) {
+                        ifw.show($(template).tmpl($data)[0], $pos); 
+                    },
+                    error: function () {
+                        ifw.show(options.ajax_load_error, $pos);
+                    }
+                });
+            };
+            infowindow.showHTML = function (url, pos) {
+                var $pos = pos,
+                    ifw = this;
+                
+                this.showLoader(pos);
+                //TODO: Check for better same-origin in url
+                if (url.slice(0, 4) == 'http'){
+                    ifw.show($('<iframe>').attr('src', url)[0], $pos);
+                } else {
+	                $.ajax({ 
+	                    url: url, 
+                        dataType: 'html',
+                        success: function (html) {
+                            ifw.show(html, $pos);
+                        },
+                        error: function () {
+                            ifw.show(options.ajax_load_error, $pos);
+                        }
+                    });
+                }
+            };
+
+            // Constructs an url with ${...} together with data to a normal url
+            function constructUrl(url, marker) {
+                var pattern = /\$\{[\w\d]+\}/g,     // match pattern for ${....}
+	                url_match = url.match(pattern), // Matches the url for ${...} and returns a list of matches
+	                param = null,                   // Used for getting a specific param from the marker
+	                tag = null;                     // The tags in the match pattern
+            
+	            for (tag in url_match) {
+	                if (url_match.hasOwnProperty(tag)) {
+	                    param = url_match[tag];
+                        url = url.replace(param, marker[param.slice(2, param.length - 1)]);
+	                }
+	            }
+                return url;
+            }
+    
+            // Function executed when clicked on a cluster object
+            function clusterClicked(cluster) {
+	            if (options.cluster_tmpl) {
+                    infowindow.showTemplate(options.cluster_tmpl, {marker_list: cluster[0].markers_}, cluster[0].getCenter());
+                }
+            }
+
+            // Function that is executed when user clicks on a marker
+            function markerClicked() {
+                var url = null;
+                
+                if (options.marker_content_url) {
+                    url = constructUrl(options.marker_content_url, this);
+                    infowindow.showHTML(url, this.position);
+                } else if (options.marker_content_tmpl) {
+                    infowindow.showTemplate(options.marker_content_tmpl, {marker: this}, this.position);
+                }
+            }
+
+            // Create from json data the google.maps.Marker and add them to the markercluster (mc)
+            // Then center the map if there is only one cluster and options.single_marker_zoom is true
+            function createMarkers(map, mc, markers) {
+                var marker_list = [],           // A list of gmakers
+                    marker = null,              // The json of a marker
+                    gmarker = null,             // The actual google.maps.Marker() type
+                    idx = null,                 // Index
+                    lat = options.position_name.lat,  // The parameter that contains the latitude
+                    lng = options.position_name.lng;  // The parameter that contains the longitude
+                
+                if (markers[0].fields) {
+                    // Django model
+                    // Use django pk and fields parameters
+                    for (idx in markers) {
+                        if (markers.hasOwnProperty(idx)) {
+                            marker = markers[idx].fields;
+                            marker.pk = markers[idx].pk;
+                            marker.position = new google.maps.LatLng(marker[lat], marker[lng]);
+                            if (!marker.icon && options.marker_icon) {
+                                marker.icon = options.marker_icon;
+                            }
+                            gmarker = new google.maps.Marker(marker);
+                            google.maps.event.addDomListener(gmarker, 'click', markerClicked);
+                            marker_list.push(gmarker);
+                        }
+                    }
+                    
+                } else {
+                    // Use normal parameters
+                    for (idx in markers) {
+                        if (markers.hasOwnProperty(idx)) {
+                            marker = markers[idx];
+                            marker.position = new google.maps.LatLng(marker[lat], marker[lng]);
+                            if (!markers[idx].icon && options.marker_icon) {
+                                marker.icon = options.marker_icon;
+                            }
+                            gmarker = new google.maps.Marker(marker);
+                            google.maps.event.addDomListener(gmarker, 'click', markerClicked);
+                            marker_list.push(gmarker);
+                        }
+                    }
+                }
+                mc.addMarkers(marker_list);
+                
+                // If there is only one marker
+                if (options.single_marker_zoom && marker_list.length === 1) {
+                    // Make sure the map is initialized
+                    // FIXME: Look for an map.init event
+                    setTimeout(function () {
+                        map.setCenter(mc.getMarkers()[0].getPosition());
+                        map.setZoom(options.single_marker_zoom);
+                    }, 100);
+                }
+            }
+            
+            return $(this).each(function (i, html_element) {
+                var map = new google.maps.Map(html_element, options.mapOptions),
+                    markerCluster = new MarkerClusterer(map, [], options.mcOptions),
+                    filter = options.filter,
+                    filterer = null,
+                    index = null,
+                    pos = null;
+
+                // FIXME: Manually override the zoomOnClick because of this bug
+                // http://www.devcomments.com/V3-MarkerClusterer-zoomOnClick-issue-at255452.htm
+                markerCluster.zoomOnClick_ = false;
+                
+                // Attach the info window to the curernt map
+                infowindow.map = map;
+                
+                // When clicked on a cluster, call the event
+                google.maps.event.addListener(markerCluster, 'clusterclick', clusterClicked);
+                
+                // Try W3C Geolocation (Preferred)
+                // Ask the user for their location and set the map to it
+                if (options.user_location_zoom && navigator.geolocation) {
+	                navigator.geolocation.getCurrentPosition(function (position) {
+		                pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
+		                map.setCenter(pos);
+		                map.setZoom(options.user_location_zoom);
+	                });
+                }
+                
+                // Load the list of markers into the map
+                if (options.markers_url) {
+                    $.get(options.markers_url, function (markers) {
+                        createMarkers(map, markerCluster, markers);
+                    }, 'json');
+                } else if (options.markers_list) {
+                    createMarkers(map, markerCluster, options.markers_list);
+                }
+                
+                if (filter) {
+                    filterer = (function (markerCluster) {
+                        var mc = markerCluster,
+                            markers = mc.getMarkers();
+                        return {
+                            addFilter: function (filter) {
+                                filter.element.click(function (event) {
+                                    var attrs = filter.attrs,
+                                        visible_markers = [],
+                                        m = null,
+                                        a = null;
+                                    
+                                    event.preventDefault();
+                                    
+                                    for (m in markers) {
+                                        if (markers.hasOwnProperty(m)) {
+                                            marker = markers[m];
+                                            for (a in attrs) {
+                                                if (attrs.hasOwnProperty(a)) {
+                                                    if (marker[a] === attrs[a]) {
+                                                        visible_markers.push(marker);
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                    // If there are no filter options, show all markers
+                                    if (!a) {
+                                        visible_markers = markers;
+                                    }
+                                    mc.clearMarkers();
+                                    mc.addMarkers(visible_markers, false);
+                                });
+                            }
+                        };
+                    }(markerCluster));
+                    for (index in filter) {
+                        if (filter.hasOwnProperty(index)) {
+                            filterer.addFilter(filter[index]);
+                        }
+                    }
+                }
+            });
+        },
+        selectLocation: function (options) {
+            var defaults = {
+                html_lng: null,
+                html_lat: null,
+                marker_icon: null,
+                markers: [],
+                html_addr: null,
+                mapOptions: {
+                    zoom: 4,
+                    center: new google.maps.LatLng(51.8211, 5.591),
+                    mapTypeId: google.maps.MapTypeId.ROADMAP,
+                    mapTypeControl: false
+                }
+            };
+            options = $.extend(defaults, options);
+            
+            function showPositionHTML(location) {
+                if (options.html_lng && options.html_lat) {
+                    if (location.lat() && location.lng()) {
+                        options.html_lat.val(location.lat());
+                        options.html_lng.val(location.lng());
+                    }
+                }
+            }
+            
+            function setMarker(map, location) {
+                var marker = null;
+                
+                if (options.markers.length) {
+                    marker = options.markers[0];
+                    marker.setPosition(location);
+                    marker.setAnimation(google.maps.Animation.DROP);
+                } else {
+                    marker = new google.maps.Marker({
+                        map: map,
+                        position: location,
+                        draggable: true,
+                        animation: google.maps.Animation.DROP
+                    });
+                    if (options.marker_icon) {
+                        marker.icon = options.marker_icon;
+                    }
+                    options.markers.push(marker);
+                    google.maps.event.addListener(options.markers[0], 'mouseup', function () {
+                        showPositionHTML(marker.getPosition());
+                    });
+                }
+                
+                map.setCenter(location);
+                showPositionHTML(marker.getPosition());
+            }
+            
+            return $(this).each(function (i, html_element) {
+                var map = new google.maps.Map($(html_element)[0], options.mapOptions),
+                    geoCoder = new google.maps.Geocoder(),
+                    location = null;
+
+                if (options.html_addr) {
+                    options.html_addr.change(function () {
+                        var address = [];
+                        options.html_addr.each(function (i, item) {
+                            address.push(item.value);
+                        });
+                        
+                        geoCoder.geocode({address: address.join(' ')}, function (results, status) {
+                            if (status === google.maps.GeocoderStatus.OK) {
+                                setMarker(map, results[0].geometry.location);
+                            }
+                        });
+                    });
+                }
+                google.maps.event.addListener(map, 'click', function (event) {
+                    setMarker(map, event.latLng);
+                });
+                
+                if (options.html_lat.val() && options.html_lng.val()) {
+                    location = new google.maps.LatLng(options.html_lat.val(), options.html_lng.val());
+                    setMarker(map, location);
+                }
+            });
+            
+        }
+    });
+}(jQuery));
 
=== modified file 'loco_directory/templates/events/global_event_detail.html'
--- loco_directory/templates/events/global_event_detail.html	2010-12-19 21:25:01 +0000
+++ loco_directory/templates/events/global_event_detail.html	2011-02-17 17:57:17 +0000
@@ -1,8 +1,19 @@
 {% extends "base.html" %}
 {% load i18n %}
 
-{% block extrahead %}{{block.super}}
+{% block extrahead %}{{ block.super }}
         <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}/css/twidenash.css" />
+        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language={% trans 'en' %}&region={% trans 'US' %}"></script>
+        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer_packed.js"></script>
+        <script type="text/javascript" src="{{MEDIA_URL}}js/jquery-ubuntu-maps.js"></script>
+        <script type="text/javascript"> 
+        //<![CDATA[
+        $(function(){
+            $('#venue-map').showLocations({markers_url:'{% url global-event-locations global_event_id=global_event_object.id %}',
+                                           marker_icon: '{{ MEDIA_URL }}/img/marker.png'});
+        });
+        //]]>
+        </script>
 {% endblock %}
 
 {% block title %}{% trans global_event_object.name %} | {% trans "Ubuntu LoCo Team Directory" %} {% endblock %}
 
=== modified file 'loco_directory/templates/events/global_event_detail.inc.html'
--- loco_directory/templates/events/global_event_detail.inc.html	2011-02-03 14:26:00 +0000
+++ loco_directory/templates/events/global_event_detail.inc.html	2011-02-17 17:57:17 +0000
@@ -1,5 +1,6 @@
 {% load i18n %}
 {% block extrahead %}{{ block.super }}
+
 {% if global_event_object.pictag %}
 <link rel="stylesheet" href="{{MEDIA_URL}}css/jquery.lightbox-0.5.css" type="text/css" media="screen" /> 
 <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.lightbox-0.5.min.js"></script>
@@ -97,11 +98,13 @@
     {% endif %}
 </article>
 
-<article class="main-content">
+<article class="minor-content">
     <h3>{% trans "Details" %}</h3>
     {% include "events/global_event_detail_basic.inc.html" %}
 </article>
 
+<section id="venue-map" class="minor-content alone venue-map"></section>
+
 <hr class="divide" />
 
 {% if global_event_object.teamevent_set.all %}
 
=== modified file 'loco_directory/templates/venues/venue_detail.html'
--- loco_directory/templates/venues/venue_detail.html	2010-11-20 17:25:50 +0000
+++ loco_directory/templates/venues/venue_detail.html	2011-02-17 17:57:17 +0000
@@ -4,10 +4,9 @@
 {% block title %}{% trans venue_object.name %} | {% trans "Ubuntu LoCo Team Directory" %} {% endblock %}
 
 {% block extrahead %}{{block.super}}
-<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
-<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ google_api_key }}" type="text/javascript"></script>
-<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
-  <script type="text/javascript" src="{{MEDIA_URL}}/js/common.js"></script>
+<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language={% trans 'en' %}&region={% trans 'US' %}"></script>
+<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer_packed.js"></script>
+<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-ubuntu-maps.js"></script>
 {% endblock %}
 
 {% block sub_nav_links %}
 
=== modified file 'loco_directory/templates/venues/venue_detail.inc.html'
--- loco_directory/templates/venues/venue_detail.inc.html	2010-07-27 10:15:45 +0000
+++ loco_directory/templates/venues/venue_detail.inc.html	2011-02-17 17:57:17 +0000
@@ -4,18 +4,16 @@
 	<p>{% include "venues/venue_detail_basic.inc.html" %}</p>
 </article>
 
-<article id="venue-map" class="" style="min-height: 300px; border: 0px;">
 {% if venue_object.longitude and venue_object.latitude %}
+<article class="minor-content alone venue-map" id="venue-map" class="">
 </article>
 <script>
-    var lon = new Array();
-    var lat = new Array();
-    var htmltext = new Array();
-    lon[0] = {{ venue_object.longitude }}
-    lat[0] = {{ venue_object.latitude }}
-    htmltext[0] = "{{ venue_object.name }}"
-    var select = new Boolean(false);
-    showmap('venue-map', select, lon, lat, htmltext) 
+    $(function(){
+        $('#venue-map').showLocations({
+            markers_list: [{ lat: {{ venue_object.latitude }}, lng: {{ venue_object.longitude }} }],
+            marker_icon: '{{ MEDIA_URL }}img/marker.png'
+        });
+    });
 </script>
 {% endif %}
 
 
=== modified file 'loco_directory/templates/venues/venue_update.html'
--- loco_directory/templates/venues/venue_update.html	2010-11-20 17:25:50 +0000
+++ loco_directory/templates/venues/venue_update.html	2011-02-17 17:57:17 +0000
@@ -8,24 +8,18 @@
 {% endblock %}
 
 {% block extrafooter %}
-<script type="text/javascript"><!--
-    var lon = new Array();
-    var lat = new Array();
-    var htmltext = new Array();
-    var select = new Boolean(true);
-    {% if venue_object %}
-    lon[0] = $("#id_longitude").val()
-    lat[0] = $("#id_latitude").val()
-    htmltext[0] = "{{ venue_object.name }}"
-    showmap('venue-map-selector', select, lon, lat, htmltext) 
-    {% else %}
-    showmap('venue-map-selector', select) 
-    {% endif %}
+<script type="text/javascript">
+//<![CDATA[
+    $(function(){
+        $('#venue-map-selector').selectLocation({html_lng: $("#id_longitude"),
+                                                 html_lat: $("#id_latitude"),
+                                                 html_addr: $("#id_country, #id_spr, #id_city, #id_address"),
+                                                 marker_icon: '{{ MEDIA_URL }}img/marker.png'});
 
-$(document).ready(function(){
-    $('span[rel*=help]').colorTip({color:'orange'});
-});
---></script>
+        $('span[rel*=help]').colorTip({color:'orange'});
+    });
+//]]>
+</script>
 {% endblock %}
 
 {% block content %}
@@ -42,6 +36,6 @@
     </form>
 </article>
 
-<div id="venue-map-selector" title="{% trans "Select venue position" %}">&nbsp;</div>
+<section class="minor-content alone venue-map" id="venue-map-selector" title="{% trans "Select venue position" %}">&nbsp;</section>
 
 {% endblock %}
 
=== modified file 'loco_directory/venues/forms.py'
--- loco_directory/venues/forms.py	2010-11-27 02:45:34 +0000
+++ loco_directory/venues/forms.py	2011-02-17 17:57:17 +0000
@@ -29,10 +29,9 @@
                        '/media/css/colortip-1.0-jquery.css', 
                        )}
         js = (
-              'http://openlayers.org/api/OpenLayers.js',
-              'http://maps.google.com/maps?file=api&amp;v=2&amp;key='+google_api_key ,
-              'http://www.openstreetmap.org/openlayers/OpenStreetMap.js',
-              '/media/js/common.js',
+              'http://maps.google.com/maps/api/js?sensor=false&language=%(language)s&region=%(region)s' % {'language': _('en'), 'region': _('US')},
+              'http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer_packed.js',
+              '/media/js/jquery-ubuntu-maps.js',
               '/media/js/colortip-1.0-jquery.js',
               )