GMaps related JS changed to use new google namespace. default tip
authorMario Ferraro <fadinlight@gmail.com>
Sun, 15 Nov 2009 22:12:20 +0100
changeset 3093 d1be59b6b627
parent 3092 beeb5d111318
GMaps related JS changed to use new google namespace. Google is going to change permanently in the future the way to load its services, so better stay safe. Also this commit shows uses of the new melange.js module. Fixes Issue 634.
app/soc/content/js/map-090917.js
app/soc/content/js/templates/soc/organization/home-091027.js
app/soc/content/js/templates/soc/role/edit-091027.js
app/soc/templates/soc/organization/home.html
app/soc/templates/soc/role/edit.html
--- a/app/soc/content/js/map-090917.js	Sat Nov 14 23:58:20 2009 +0100
+++ b/app/soc/content/js/map-090917.js	Sun Nov 15 22:12:20 2009 +0100
@@ -1,347 +0,0 @@
-(function () {
-  var role_profile_gmap = window.role_profile_gmap = function () {
-  };
-
-  // Create global variables
-  var map;
-  var marker;
-  var geocoder;
-
-  // The following strings can be customized to reflect ids in the page.
-  // You can also add or remove fields used for GMap Geocoding in 
-  // the JSON address object
-
-  var current_lat = 0;
-  var current_lng = 0;
-
-  // Two different levels for zoom: Starting one and an inner that 
-  // is used when showing the map if lat and lon page fields are set
-  var world_zoom = 0;
-  var country_zoom = 4;
-  var state_zoom = 6;
-  var city_zoom = 10;
-  var address_zoom = 13;
-
-  // Do not add a starting # as this JQuery selector seems 
-  // incompatible with GMap API
-  var map_div = "role_profile_map";
-
-  var field_lat = "#id_latitude";
-  var field_lng = "#id_longitude";
-  // Need to save old values to avoid unwanted updating 
-  // of lat and lot if marker dragged and blur another time an address field
-  var address = {
-    street: {
-      id: "#id_res_street",
-      old_value: ""
-    },
-    city: {
-      id: "#id_res_city",
-      old_value: ""
-    },
-    state: {
-      id: "#id_res_state",
-      old_value: ""
-    },
-    country: {
-      id: "#id_res_country",
-      old_value: ""
-    },
-    postalcode: {
-      id: "#id_res_postalcode",
-      old_value: ""
-    }
-  };
-
-  // Save current address fields in the JSON Object
-  function saveOldAddress() {
-    jQuery.each(address, function (level, level_details) {
-      level_details.old_value = jQuery(level_details.id).val();
-    });
-  }
-
-  // Return true if the user has edited address fields
-  function isNewAddress() {
-    var is_new = false;
-    jQuery.each(address, function (level, level_details) {
-      if (jQuery(level_details.id).val() !== level_details.old_value) {
-        is_new = true;
-        return false;
-      }
-    });
-    return is_new;
-  }
-
-  // Write saved lat and lng values to page fields
-  function setLatLngFields() {
-    jQuery(field_lat).val(current_lat);
-    jQuery(field_lng).val(current_lng);
-  }
-
-  // Read lat and lng fields and store them
-  function readLatLngFields() {
-    current_lat = jQuery(field_lat).val();
-    current_lng = jQuery(field_lng).val();
-  }
-
-  // This function reads address fields, merge them and uses
-  // GMap API geocoding to find the first hit
-  // Using geocoding
-  // http://code.google.com/intl/it-IT/apis/maps/documentation/
-  // services.html#Geocoding
-  function calculateAddress() {
-    // If the user has really edited address fields...
-    if (isNewAddress()) {
-      // Merge address fields
-      var address_string = "";
-      jQuery.each(address, function (level, level_details) {
-        address_string += jQuery(level_details.id).val() + ",";
-      });
-
-      // Ask GMap API for geocoding
-      geocoder.getLatLng(
-        address_string,
-        function (point) {
-          // If a point is found
-          if (point) {
-            // Save the current address in the JSON object
-            saveOldAddress();
-            // Set the new zoom, map center and marker coords
-            var zoom_set = world_zoom;
-            if (jQuery(address.street.id).val() !== "") {
-              zoom_set = address_zoom;
-            }
-            else if (jQuery(address.city.id).val() !== "") {
-              zoom_set = city_zoom;
-            }
-            else if (jQuery(address.state.id).val() !== "") {
-              zoom_set = state_zoom;
-            }
-            else if (jQuery(address.country.id).val() !== "") {
-              zoom_set = country_zoom;
-            }
-            map.setCenter(point, zoom_set);
-            marker.setPoint(point);
-            map.clearOverlays();
-            map.addOverlay(marker);
-            // Save point coords in local variables and then update 
-            // the page lat/lng fields
-            current_lat = point.lat();
-            current_lng = point.lng();
-            setLatLngFields();
-          }
-        }
-      );
-    }
-  }
-
-  // Public function to load the map
-  role_profile_gmap.map_load = function () {
-    // All can happen only if there is gmap compatible browser.
-    // TODO: Fallback in case the browser is not compatible
-    if (window.GBrowserIsCompatible()) {
-      // Save the address fields. This is useful if the page is being edited
-      // to not update blindly the lat/lng fields with GMap geocoding if
-      // blurring an address field
-      saveOldAddress();
-      var starting_point;
-      var zoom_selected = world_zoom;
-      var show_marker = true;
-
-      // Create the map and add small controls
-      map = new window.GMap2(document.getElementById(map_div));
-      map.addControl(new window.GSmallMapControl());
-      map.addControl(new window.GMapTypeControl());
-
-      // Instantiate a global geocoder for future use
-      geocoder = new window.GClientGeocoder();
-
-      // If lat and lng fields are not void (the page is being edited) then
-      // update the starting coords, modify the zoom level and tells following
-      // code to show the marker
-      if (jQuery(field_lat).val() !== "" && jQuery(field_lng).val() !== "") {
-        readLatLngFields();
-        zoom_selected = address_zoom;
-        show_marker = true;
-      }
-
-      // Set map center, marker coords and show it if this is an editing
-      starting_point = new window.GLatLng(current_lat, current_lng);
-      map.setCenter(starting_point, zoom_selected);
-      marker = new window.GMarker(starting_point, {draggable: true});
-      if (show_marker) {
-        map.addOverlay(marker);
-      }
-
-      // Adds a new event listener to geocode the address when an address 
-      // field is blurred
-      jQuery.each(address, function (level, level_details) {
-        jQuery(level_details.id).blur(calculateAddress);
-      });
-
-      // Adds a new event listener: if the marker has been dragged around...
-      window.GEvent.addListener(marker, "dragend", function () {
-        // Update internal variables with current marker coords...
-        current_lat = marker.getPoint().lat();
-        current_lng = marker.getPoint().lng();
-        // ...and set page fields accordingly
-        setLatLngFields();
-      });
-    }
-  };
-}());
-
-(function () {
-  var org_home_gmap = window.org_home_gmap = function () {
-  };
-  // Global variables
-  var map;
-
-  // HTML div tag where map needs to be inserted
-  var map_div = "org_home_map";
-
-  // Setup required icons
-  var base_icon = new window.GIcon();
-  base_icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
-  base_icon.iconSize = new window.GSize(20, 34);
-  base_icon.shadowSize = new window.GSize(37, 34);
-  base_icon.iconAnchor = new window.GPoint(9, 34);
-  base_icon.infoWindowAnchor = new window.GPoint(9, 2);
-  base_icon.infoShadowAnchor = new window.GPoint(18, 25);
-  var student_icon = new window.GIcon(base_icon);
-  student_icon.image = "http://www.google.com/mapfiles/marker.png";
-  var mentor_icon = new window.GIcon(base_icon);
-  mentor_icon.image = "/soc/content/images/mentor-marker.png";
-
-  // Map load function
-  org_home_gmap.map_load = function (map_data) {
-
-    if (window.GBrowserIsCompatible()) {
-      // Create the map and add small controls
-      map = new window.GMap2(document.getElementById(map_div));
-      map.addControl(new window.GLargeMapControl());
-      map.addControl(new window.GMapTypeControl());
-
-      // Set map center and initial zoom level
-      map.setCenter(new window.GLatLng(0, 0), 1);
-
-      var mentors = {};
-      var students = {};
-      var projects = {};
-      var polylines = [];
-
-      jQuery.each(map_data.people, function (key, person) {
-        if (person.type === "student") {
-          students[key] = {
-            "name": person.name,
-            "lat": person.lat,
-            "lon": person.lon,
-            "projects": person.projects
-          };
-        }
-        if (person.type === "mentor") {
-          mentors[key] = {
-            "name": person.name,
-            "lat": person.lat,
-            "lon": person.lon,
-            "projects": person.projects
-          };
-        }
-      });
-
-      // Iterate over projects to draw polylines
-      jQuery.each(map_data.projects, function (key, project) {
-        var current_student = students[project.student_key];
-        var current_mentor = mentors[project.mentor_key];
-        if (current_student !== undefined && 
-            current_mentor !== undefined &&
-            current_student.lat !== null &&
-            current_student.lon !== null &&
-            current_mentor.lat !== null &&
-            current_mentor.lon !== null) {
-              /*jslint white: false */
-              polylines.push([
-                [current_student.lat, current_student.lon],
-                [current_mentor.lat, current_mentor.lon]
-              ]);
-              /*jslint white: true */
-        }
-      });
-
-      // Iterate over students
-      jQuery.each(students, function (key, person) {
-        var html = "";
-        var marker = null;
-
-        if (person.lat !== null && person.lon !== null) {
-          var point = new window.GLatLng(person.lat, person.lon);
-
-          marker = new window.GMarker(point, student_icon);
-          html = [
-            "<strong>", person.name, "</strong><br />",
-            "<span style='font-style:italic;'>Student</span><br />",
-            "<div style='height:100px;width:300px;",
-            "overflow:auto;font-size:70%'>"
-          ].join("");
-          // iterate through projects
-          jQuery.each(person.projects, function () {
-            var current_project = map_data.projects[this];
-            html += [
-              "<a href='", current_project.redirect, "'>",
-              current_project.title, "</a><br />",
-              "Mentor: ", current_project.mentor_name, "<br />"
-            ].join("");
-          });
-          html += "</div>";
-          window.GEvent.addListener(marker, "click", function () {
-            marker.openInfoWindowHtml(html);
-          });
-
-          map.addOverlay(marker);
-        }
-      });
-
-      // Iterate over mentors
-      jQuery.each(mentors, function (key, person) {
-        var html = "";
-        var marker = null;
-
-        if (person.lat !== null && person.lon !== null) {
-          var point = new window.GLatLng(person.lat, person.lon);
-
-          marker = new window.GMarker(point, mentor_icon);
-          html = [
-            "<strong>", person.name, "</strong><br />",
-            "<span style='font-style:italic;'>Mentor</span><br />",
-            "<div style='height:100px;width:300px;",
-            "overflow:auto;font-size:70%'>"
-          ].join("");
-          // iterate through projects
-          jQuery.each(person.projects, function () {
-            var current_project = map_data.projects[this];
-            html += [
-              "<a href='", current_project.redirect, "'>",
-              current_project.title, "</a><br />",
-              "Student: ", current_project.student_name, "<br />"
-            ].join("");
-          });
-          html += "</div>";
-
-          window.GEvent.addListener(marker, "click", function () {
-            marker.openInfoWindowHtml(html);
-          });
-
-          map.addOverlay(marker);
-        }
-      });
-
-      // Draw all polylines
-      jQuery.each(polylines, function () {
-        var from = new window.GLatLng(this[0][0], this[0][1]);
-        var to = new window.GLatLng(this[1][0], this[1][1]);
-        var polyline = new window.GPolyline([from, to], "#ff0000", 3);
-        map.addOverlay(polyline);
-      });
-    }
-  };
-}());
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/soc/content/js/templates/soc/organization/home-091027.js	Sun Nov 15 22:12:20 2009 +0100
@@ -0,0 +1,187 @@
+/* Copyright 2009 the Melange authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * @author <a href="mailto:fadinlight@gmail.com">Mario Ferraro</a>
+ */
+
+(function () {
+  var melange = window.melange;
+  this.prototype = new melange.templates._baseTemplate();
+  this.prototype.constructor = melange.templates._baseTemplate;
+  melange.templates._baseTemplate.apply(this, arguments);
+
+  var _self = this;
+
+  // Global variables
+  var map;
+
+  // Map data taken from JS context
+  var map_data = this.context.map_data;
+
+  // HTML div tag where map needs to be inserted
+  var map_div = "org_home_map";
+
+  // Map load function
+  function map_load() {
+
+    // Setup required icons
+    var base_icon = new google.maps.Icon();
+    base_icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
+    base_icon.iconSize = new google.maps.Size(20, 34);
+    base_icon.shadowSize = new google.maps.Size(37, 34);
+    base_icon.iconAnchor = new google.maps.Point(9, 34);
+    base_icon.infoWindowAnchor = new google.maps.Point(9, 2);
+    base_icon.infoShadowAnchor = new google.maps.Point(18, 25);
+    var student_icon = new google.maps.Icon(base_icon);
+    student_icon.image = "http://www.google.com/mapfiles/marker.png";
+    var mentor_icon = new google.maps.Icon(base_icon);
+    mentor_icon.image = "/soc/content/images/mentor-marker.png";
+
+    if (google.maps.BrowserIsCompatible()) {
+      // Create the map and add small controls
+      map = new google.maps.Map2(document.getElementById(map_div));
+      map.addControl(new google.maps.LargeMapControl());
+      map.addControl(new google.maps.MapTypeControl());
+
+      // Set map center and initial zoom level
+      map.setCenter(new google.maps.LatLng(0, 0), 1);
+
+      var mentors = {};
+      var students = {};
+      var projects = {};
+      var polylines = [];
+
+      jQuery.each(map_data.people, function (key, person) {
+        if (person.type === "student") {
+          students[key] = {
+            "name": person.name,
+            "lat": person.lat,
+            "lon": person.lon,
+            "projects": person.projects
+          };
+        }
+        if (person.type === "mentor") {
+          mentors[key] = {
+            "name": person.name,
+            "lat": person.lat,
+            "lon": person.lon,
+            "projects": person.projects
+          };
+        }
+      });
+
+      // Iterate over projects to draw polylines
+      jQuery.each(map_data.projects, function (key, project) {
+        var current_student = students[project.student_key];
+        var current_mentor = mentors[project.mentor_key];
+        if (current_student !== undefined && 
+            current_mentor !== undefined &&
+            current_student.lat !== null &&
+            current_student.lon !== null &&
+            current_mentor.lat !== null &&
+            current_mentor.lon !== null) {
+              /*jslint white: false */
+              polylines.push([
+                [current_student.lat, current_student.lon],
+                [current_mentor.lat, current_mentor.lon]
+              ]);
+              /*jslint white: true */
+        }
+      });
+
+      // Iterate over students
+      jQuery.each(students, function (key, person) {
+        var html = "";
+        var marker = null;
+
+        if (person.lat !== null && person.lon !== null) {
+          var point = new google.maps.LatLng(person.lat, person.lon);
+
+          marker = new google.maps.Marker(point, student_icon);
+          html = [
+            "<strong>", person.name, "</strong><br />",
+            "<span style='font-style:italic;'>Student</span><br />",
+            "<div style='height:100px;width:300px;",
+            "overflow:auto;font-size:70%'>"
+          ].join("");
+          // iterate through projects
+          jQuery.each(person.projects, function () {
+            var current_project = map_data.projects[this];
+            html += [
+              "<a href='", current_project.redirect, "'>",
+              current_project.title, "</a><br />",
+              "Mentor: ", current_project.mentor_name, "<br />"
+            ].join("");
+          });
+          html += "</div>";
+          google.maps.Event.addListener(marker, "click", function () {
+            marker.openInfoWindowHtml(html);
+          });
+
+          map.addOverlay(marker);
+        }
+      });
+
+      // Iterate over mentors
+      jQuery.each(mentors, function (key, person) {
+        var html = "";
+        var marker = null;
+
+        if (person.lat !== null && person.lon !== null) {
+          var point = new google.maps.LatLng(person.lat, person.lon);
+
+          marker = new google.maps.Marker(point, mentor_icon);
+          html = [
+            "<strong>", person.name, "</strong><br />",
+            "<span style='font-style:italic;'>Mentor</span><br />",
+            "<div style='height:100px;width:300px;",
+            "overflow:auto;font-size:70%'>"
+          ].join("");
+          // iterate through projects
+          jQuery.each(person.projects, function () {
+            var current_project = map_data.projects[this];
+            html += [
+              "<a href='", current_project.redirect, "'>",
+              current_project.title, "</a><br />",
+              "Student: ", current_project.student_name, "<br />"
+            ].join("");
+          });
+          html += "</div>";
+
+          google.maps.Event.addListener(marker, "click", function () {
+            marker.openInfoWindowHtml(html);
+          });
+
+          map.addOverlay(marker);
+        }
+      });
+
+      // Draw all polylines
+      jQuery.each(polylines, function () {
+        var from = new google.maps.LatLng(this[0][0], this[0][1]);
+        var to = new google.maps.LatLng(this[1][0], this[1][1]);
+        var polyline = new google.maps.Polyline([from, to], "#ff0000", 3);
+        map.addOverlay(polyline);
+      });
+    }
+  }
+
+  jQuery(
+    function () {
+      melange.loadGoogleApi("maps", "2", {}, map_load);
+    }
+  );
+
+}());
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/soc/content/js/templates/soc/role/edit-091027.js	Sun Nov 15 22:12:20 2009 +0100
@@ -0,0 +1,221 @@
+/* Copyright 2009 the Melange authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * @author <a href="mailto:fadinlight@gmail.com">Mario Ferraro</a>
+ */
+
+(function () {
+  var melange = window.melange;
+  this.prototype = new melange.templates._baseTemplate();
+  this.prototype.constructor = melange.templates._baseTemplate;
+  melange.templates._baseTemplate.apply(this, arguments);
+
+  var _self = this;
+
+  // Create global variables
+  var map;
+  var marker;
+  var geocoder;
+
+  // The following strings can be customized to reflect ids in the page.
+  // You can also add or remove fields used for GMap Geocoding in 
+  // the JSON address object
+
+  var current_lat = 0;
+  var current_lng = 0;
+
+  // Two different levels for zoom: Starting one and an inner that 
+  // is used when showing the map if lat and lon page fields are set
+  var world_zoom = 0;
+  var country_zoom = 4;
+  var state_zoom = 6;
+  var city_zoom = 10;
+  var address_zoom = 13;
+
+  // Do not add a starting # as this JQuery selector seems 
+  // incompatible with GMap API
+  var map_div = "role_profile_map";
+
+  var field_lat = "#id_latitude";
+  var field_lng = "#id_longitude";
+  // Need to save old values to avoid unwanted updating 
+  // of lat and lot if marker dragged and blur another time an address field
+  var address = {
+    street: {
+      id: "#id_res_street",
+      old_value: ""
+    },
+    city: {
+      id: "#id_res_city",
+      old_value: ""
+    },
+    state: {
+      id: "#id_res_state",
+      old_value: ""
+    },
+    country: {
+      id: "#id_res_country",
+      old_value: ""
+    },
+    postalcode: {
+      id: "#id_res_postalcode",
+      old_value: ""
+    }
+  };
+
+  // Save current address fields in the JSON Object
+  function saveOldAddress() {
+    jQuery.each(address, function (level, level_details) {
+      level_details.old_value = jQuery(level_details.id).val();
+    });
+  }
+
+  // Return true if the user has edited address fields
+  function isNewAddress() {
+    var is_new = false;
+    jQuery.each(address, function (level, level_details) {
+      if (jQuery(level_details.id).val() !== level_details.old_value) {
+        is_new = true;
+        return false;
+      }
+    });
+    return is_new;
+  }
+
+  // Write saved lat and lng values to page fields
+  function setLatLngFields() {
+    jQuery(field_lat).val(current_lat);
+    jQuery(field_lng).val(current_lng);
+  }
+
+  // Read lat and lng fields and store them
+  function readLatLngFields() {
+    current_lat = jQuery(field_lat).val();
+    current_lng = jQuery(field_lng).val();
+  }
+
+  // This function reads address fields, merge them and uses
+  // GMap API geocoding to find the first hit
+  // Using geocoding
+  // http://code.google.com/intl/it-IT/apis/maps/documentation/
+  // services.html#Geocoding
+  function calculateAddress() {
+    // If the user has really edited address fields...
+    if (isNewAddress()) {
+      // Merge address fields
+      var address_string = "";
+      jQuery.each(address, function (level, level_details) {
+        address_string += jQuery(level_details.id).val() + ",";
+      });
+
+      // Ask GMap API for geocoding
+      geocoder.getLatLng(
+        address_string,
+        function (point) {
+          // If a point is found
+          if (point) {
+            // Save the current address in the JSON object
+            saveOldAddress();
+            // Set the new zoom, map center and marker coords
+            var zoom_set = world_zoom;
+            if (jQuery(address.street.id).val() !== "") {
+              zoom_set = address_zoom;
+            }
+            else if (jQuery(address.city.id).val() !== "") {
+              zoom_set = city_zoom;
+            }
+            else if (jQuery(address.state.id).val() !== "") {
+              zoom_set = state_zoom;
+            }
+            else if (jQuery(address.country.id).val() !== "") {
+              zoom_set = country_zoom;
+            }
+            map.setCenter(point, zoom_set);
+            marker.setPoint(point);
+            map.clearOverlays();
+            map.addOverlay(marker);
+            // Save point coords in local variables and then update 
+            // the page lat/lng fields
+            current_lat = point.lat();
+            current_lng = point.lng();
+            setLatLngFields();
+          }
+        }
+      );
+    }
+  }
+
+  // Public function to load the map
+  function map_load() {
+    // All can happen only if there is gmap compatible browser.
+    // TODO: Fallback in case the browser is not compatible
+    if (google.maps.BrowserIsCompatible()) {
+      // Save the address fields. This is useful if the page is being edited
+      // to not update blindly the lat/lng fields with GMap geocoding if
+      // blurring an address field
+      saveOldAddress();
+      var starting_point;
+      var zoom_selected = world_zoom;
+      var show_marker = true;
+
+      // Create the map and add small controls
+      map = new google.maps.Map2(document.getElementById(map_div));
+      map.addControl(new google.maps.SmallMapControl());
+      map.addControl(new google.maps.MapTypeControl());
+
+      // Instantiate a global geocoder for future use
+      geocoder = new google.maps.ClientGeocoder();
+
+      // If lat and lng fields are not void (the page is being edited) then
+      // update the starting coords, modify the zoom level and tells following
+      // code to show the marker
+      if (jQuery(field_lat).val() !== "" && jQuery(field_lng).val() !== "") {
+        readLatLngFields();
+        zoom_selected = address_zoom;
+        show_marker = true;
+      }
+
+      // Set map center, marker coords and show it if this is an editing
+      starting_point = new google.maps.LatLng(current_lat, current_lng);
+      map.setCenter(starting_point, zoom_selected);
+      marker = new google.maps.Marker(starting_point, {draggable: true});
+      if (show_marker) {
+        map.addOverlay(marker);
+      }
+
+      // Adds a new event listener to geocode the address when an address 
+      // field is blurred
+      jQuery.each(address, function (level, level_details) {
+        jQuery(level_details.id).blur(calculateAddress);
+      });
+
+      // Adds a new event listener: if the marker has been dragged around...
+      google.maps.Event.addListener(marker, "dragend", function () {
+        // Update internal variables with current marker coords...
+        current_lat = marker.getPoint().lat();
+        current_lng = marker.getPoint().lng();
+        // ...and set page fields accordingly
+        setLatLngFields();
+      });
+    }
+  }
+
+  jQuery(
+    function () {
+      melange.loadGoogleApi("maps", "2", {}, map_load);
+    }
+  );
+
+}());
--- a/app/soc/templates/soc/organization/home.html	Sat Nov 14 23:58:20 2009 +0100
+++ b/app/soc/templates/soc/organization/home.html	Sun Nov 15 22:12:20 2009 +0100
@@ -16,17 +16,13 @@
 {% block scripts %}
 {{ block.super }}
 {% if gmaps_api_key %}
-	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ gmaps_api_key }}" type="text/javascript"></script>
-	<script type="text/javascript" src="/soc/content/js/map-090917.js"></script>
+	<script src="http://www.google.com/jsapi?key={{ gmaps_api_key }}" type="text/javascript"></script>
+	<script type="text/javascript" src="/soc/content/js/templates/soc/organization/home-091027.js" melangeContext="{map_data: {{ org_map_data }} }"></script>
 {% endif %}
 {% endblock %}
 
 {% block body_tag %}
-  {% if gmaps_api_key %}
-    <body onLoad="org_home_gmap.map_load({{ org_map_data }})" onunload="GUnload()">
-  {% else %}
-    {{ block.super }}
-  {% endif %}
+  {{ block.super }}
 {% endblock %}
 
 {% block instructions %}
--- a/app/soc/templates/soc/role/edit.html	Sat Nov 14 23:58:20 2009 +0100
+++ b/app/soc/templates/soc/role/edit.html	Sun Nov 15 22:12:20 2009 +0100
@@ -17,17 +17,13 @@
 {% block scripts %}
 {{ block.super }}
 {% if gmaps_api_key %}
-	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ gmaps_api_key }}" type="text/javascript"></script>
-	<script type="text/javascript" src="/soc/content/js/map-090917.js"></script>
+	<script src="http://www.google.com/jsapi?key={{ gmaps_api_key }}" type="text/javascript"></script>
+	<script type="text/javascript" src="/soc/content/js/templates/soc/role/edit-091027.js"></script>
 {% endif %}
 {% endblock %}
 
 {% block body_tag %}
-  {% if gmaps_api_key %}
-    <body onLoad="role_profile_gmap.map_load()" onunload="GUnload()">
-  {% else %}
-    {{ block.super }}
-  {% endif %}
+{{ block.super }}
 {% endblock %}
 
 {% block instructions %}