gmaps4rails 1.5.2 → 1.5.3

data/public/javascripts/gmaps4rails/gmaps4rails.base.js

@@ -80,6 +80,13 @@
       this.circles = [];
       this.markerClusterer = null;
       this.markerImages = [];
+      this.polylines_conf = {
+        strokeColor: "#FF0000",
+        strokeOpacity: 1,
+        strokeWeight: 2,
+        clickable: false,
+        zIndex: null
+      };
     }
 
     Gmaps4Rails.prototype.initialize = function() {
@@ -273,71 +280,6 @@
       return polygon.serviceObject = new_poly;
     };
 
-    Gmaps4Rails.prototype.replacePolylines = function(new_polylines) {
-      this.destroy_polylines();
-      this.polylines = new_polylines;
-      this.create_polylines();
-      return this.adjustMapToBounds();
-    };
-
-    Gmaps4Rails.prototype.destroy_polylines = function() {
-      var polyline, _i, _len, _ref;
-      _ref = this.polylines;
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        polyline = _ref[_i];
-        polyline.serviceObject.setMap(null);
-      }
-      return this.polylines = [];
-    };
-
-    Gmaps4Rails.prototype.create_polylines = function() {
-      var polyline, _i, _len, _ref, _results;
-      _ref = this.polylines;
-      _results = [];
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        polyline = _ref[_i];
-        _results.push(this.create_polyline(polyline));
-      }
-      return _results;
-    };
-
-    Gmaps4Rails.prototype.create_polyline = function(polyline) {
-      var clickable, decoded_array, element, latlng, new_poly, point, polyline_coordinates, strokeColor, strokeOpacity, strokeWeight, zIndex, _i, _j, _len, _len2;
-      polyline_coordinates = [];
-      for (_i = 0, _len = polyline.length; _i < _len; _i++) {
-        element = polyline[_i];
-        if (element.coded_array != null) {
-          decoded_array = new google.maps.geometry.encoding.decodePath(element.coded_array);
-          for (_j = 0, _len2 = decoded_array.length; _j < _len2; _j++) {
-            point = decoded_array[_j];
-            polyline_coordinates.push(point);
-          }
-        } else {
-          if (element === polyline[0]) {
-            strokeColor = element.strokeColor || this.polylines_conf.strokeColor;
-            strokeOpacity = element.strokeOpacity || this.polylines_conf.strokeOpacity;
-            strokeWeight = element.strokeWeight || this.polylines_conf.strokeWeight;
-            clickable = element.clickable || this.polylines_conf.clickable;
-            zIndex = element.zIndex || this.polylines_conf.zIndex;
-          }
-          if ((element.lat != null) && (element.lng != null)) {
-            latlng = this.createLatLng(element.lat, element.lng);
-            polyline_coordinates.push(latlng);
-          }
-        }
-      }
-      new_poly = new google.maps.Polyline({
-        path: polyline_coordinates,
-        strokeColor: strokeColor,
-        strokeOpacity: strokeOpacity,
-        strokeWeight: strokeWeight,
-        clickable: clickable,
-        zIndex: zIndex
-      });
-      polyline.serviceObject = new_poly;
-      return new_poly.setMap(this.serviceObject);
-    };
-
     Gmaps4Rails.prototype.create_markers = function() {
       this.createServiceMarkersFromMarkers();
       return this.clusterize();
@@ -435,62 +377,43 @@
     };
 
     Gmaps4Rails.prototype.adjustMapToBounds = function() {
-      var bound, circle, map_center, point, polygon, polygon_points, polyline, polyline_points, _i, _j, _k, _l, _len, _len2, _len3, _len4, _len5, _len6, _m, _n, _ref, _ref2, _ref3, _ref4;
       if (this.map_options.auto_adjust || this.map_options.bounds !== null) {
         this.boundsObject = this.createLatLngBounds();
-      }
-      if (this.map_options.auto_adjust) {
-        this.extendBoundsWithMarkers();
-        _ref = this.polylines;
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          polyline = _ref[_i];
-          polyline_points = polyline.serviceObject.latLngs.getArray()[0].getArray();
-          for (_j = 0, _len2 = polyline_points.length; _j < _len2; _j++) {
-            point = polyline_points[_j];
-            this.boundsObject.extend(point);
-          }
-        }
-        _ref2 = this.polygons;
-        for (_k = 0, _len3 = _ref2.length; _k < _len3; _k++) {
-          polygon = _ref2[_k];
-          polygon_points = polygon.serviceObject.latLngs.getArray()[0].getArray();
-          for (_l = 0, _len4 = polygon_points.length; _l < _len4; _l++) {
-            point = polygon_points[_l];
-            this.boundsObject.extend(point);
-          }
-        }
-        _ref3 = this.circles;
-        for (_m = 0, _len5 = _ref3.length; _m < _len5; _m++) {
-          circle = _ref3[_m];
-          this.boundsObject.extend(circle.serviceObject.getBounds().getNorthEast());
-          this.boundsObject.extend(circle.serviceObject.getBounds().getSouthWest());
+        if (this.map_options.auto_adjust) {
+          this.extendBoundsWithMarkers();
+          this.updateBoundsWithPolylines();
+          this.updateBoundsWithPolygons();
+          this.updateBoundsWithCircles();
         }
+        this.extendMapBounds();
+        return this.adaptMapToBounds();
       }
-      _ref4 = this.map_options.bounds;
-      for (_n = 0, _len6 = _ref4.length; _n < _len6; _n++) {
-        bound = _ref4[_n];
-        bound = this.createLatLng(bound.lat, bound.lng);
-        this.boundsObject.extend(bound);
-      }
-      if (this.map_options.auto_adjust || this.map_options.bounds.length > 0) {
-        if (!this.map_options.auto_zoom) {
-          map_center = this.boundsObject.getCenter();
-          this.map_options.center_latitude = map_center.lat();
-          this.map_options.center_longitude = map_center.lng();
-          return this.serviceObject.setCenter(map_center);
-        } else {
-          return this.fitBounds();
-        }
+    };
+
+    Gmaps4Rails.prototype.replacePolylines = function(new_polylines) {
+      this.destroy_polylines();
+      this.polylines = new_polylines;
+      this.create_polylines();
+      return this.adjustMapToBounds();
+    };
+
+    Gmaps4Rails.prototype.destroy_polylines = function() {
+      var polyline, _i, _len, _ref;
+      _ref = this.polylines;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        polyline = _ref[_i];
+        polyline.serviceObject.setMap(null);
       }
+      return this.polylines = [];
     };
 
-    Gmaps4Rails.prototype.create_kml = function() {
-      var kml, _i, _len, _ref, _results;
-      _ref = this.kml;
+    Gmaps4Rails.prototype.create_polylines = function() {
+      var polyline, _i, _len, _ref, _results;
+      _ref = this.polylines;
       _results = [];
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        kml = _ref[_i];
-        _results.push(kml.serviceObject = this.createKmlLayer(kml));
+        polyline = _ref[_i];
+        _results.push(this.create_polyline(polyline));
       }
       return _results;
     };

data/public/javascripts/gmaps4rails/gmaps4rails.bing.js

@@ -207,6 +207,18 @@
       });
     };
 
+    Gmaps4RailsBing.prototype.updateBoundsWithPolylines = function() {};
+
+    Gmaps4RailsBing.prototype.updateBoundsWithPolygons = function() {};
+
+    Gmaps4RailsBing.prototype.updateBoundsWithCircles = function() {};
+
+    Gmaps4RailsBing.prototype.extendMapBounds = function() {};
+
+    Gmaps4RailsBing.prototype.adaptMapToBounds = function() {
+      return this.fitBounds();
+    };
+
     return Gmaps4RailsBing;
 
   })(Gmaps4Rails);

data/public/javascripts/gmaps4rails/gmaps4rails.googlemaps.js

@@ -34,13 +34,6 @@
         fillOpacity: 0.35,
         clickable: false
       };
-      this.polylines_conf = {
-        strokeColor: "#FF0000",
-        strokeOpacity: 1,
-        strokeWeight: 2,
-        clickable: false,
-        zIndex: null
-      };
       this.circles_conf = {
         fillColor: "#00AAFF",
         fillOpacity: 0.35,
@@ -297,6 +290,74 @@
       return kml;
     };
 
+    Gmaps4RailsGoogle.prototype.create_polyline = function(polyline) {
+      var clickable, decoded_array, element, latlng, new_poly, point, polyline_coordinates, strokeColor, strokeOpacity, strokeWeight, zIndex, _i, _j, _len, _len2;
+      polyline_coordinates = [];
+      for (_i = 0, _len = polyline.length; _i < _len; _i++) {
+        element = polyline[_i];
+        if (element.coded_array != null) {
+          decoded_array = new google.maps.geometry.encoding.decodePath(element.coded_array);
+          for (_j = 0, _len2 = decoded_array.length; _j < _len2; _j++) {
+            point = decoded_array[_j];
+            polyline_coordinates.push(point);
+          }
+        } else {
+          if (element === polyline[0]) {
+            strokeColor = element.strokeColor || this.polylines_conf.strokeColor;
+            strokeOpacity = element.strokeOpacity || this.polylines_conf.strokeOpacity;
+            strokeWeight = element.strokeWeight || this.polylines_conf.strokeWeight;
+            clickable = element.clickable || this.polylines_conf.clickable;
+            zIndex = element.zIndex || this.polylines_conf.zIndex;
+          }
+          if ((element.lat != null) && (element.lng != null)) {
+            latlng = this.createLatLng(element.lat, element.lng);
+            polyline_coordinates.push(latlng);
+          }
+        }
+      }
+      new_poly = new google.maps.Polyline({
+        path: polyline_coordinates,
+        strokeColor: strokeColor,
+        strokeOpacity: strokeOpacity,
+        strokeWeight: strokeWeight,
+        clickable: clickable,
+        zIndex: zIndex
+      });
+      polyline.serviceObject = new_poly;
+      return new_poly.setMap(this.serviceObject);
+    };
+
+    Gmaps4RailsGoogle.prototype.updateBoundsWithPolylines = function() {
+      var point, polyline, polyline_points, _i, _len, _ref, _results;
+      _ref = this.polylines;
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        polyline = _ref[_i];
+        polyline_points = polyline.serviceObject.latLngs.getArray()[0].getArray();
+        _results.push((function() {
+          var _j, _len2, _results2;
+          _results2 = [];
+          for (_j = 0, _len2 = polyline_points.length; _j < _len2; _j++) {
+            point = polyline_points[_j];
+            _results2.push(this.boundsObject.extend(point));
+          }
+          return _results2;
+        }).call(this));
+      }
+      return _results;
+    };
+
+    Gmaps4RailsGoogle.prototype.create_kml = function() {
+      var kml, _i, _len, _ref, _results;
+      _ref = this.kml;
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        kml = _ref[_i];
+        _results.push(kml.serviceObject = this.createKmlLayer(kml));
+      }
+      return _results;
+    };
+
     Gmaps4RailsGoogle.prototype.fitBounds = function() {
       if (!this.boundsObject.isEmpty()) {
         return this.serviceObject.fitBounds(this.boundsObject);
@@ -307,6 +368,61 @@
       return this.serviceObject.setCenter(this.userLocation);
     };
 
+    Gmaps4RailsGoogle.prototype.updateBoundsWithPolygons = function() {
+      var point, polygon, polygon_points, _i, _len, _ref, _results;
+      _ref = this.polygons;
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        polygon = _ref[_i];
+        polygon_points = polygon.serviceObject.latLngs.getArray()[0].getArray();
+        _results.push((function() {
+          var _j, _len2, _results2;
+          _results2 = [];
+          for (_j = 0, _len2 = polygon_points.length; _j < _len2; _j++) {
+            point = polygon_points[_j];
+            _results2.push(this.boundsObject.extend(point));
+          }
+          return _results2;
+        }).call(this));
+      }
+      return _results;
+    };
+
+    Gmaps4RailsGoogle.prototype.updateBoundsWithCircles = function() {
+      var circle, _i, _len, _ref, _results;
+      _ref = this.circles;
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        circle = _ref[_i];
+        this.boundsObject.extend(circle.serviceObject.getBounds().getNorthEast());
+        _results.push(this.boundsObject.extend(circle.serviceObject.getBounds().getSouthWest()));
+      }
+      return _results;
+    };
+
+    Gmaps4RailsGoogle.prototype.extendMapBounds = function() {
+      var bound, _i, _len, _ref, _results;
+      _ref = this.map_options.bounds;
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        bound = _ref[_i];
+        _results.push(this.boundsObject.extend(this.createLatLng(bound.lat, bound.lng)));
+      }
+      return _results;
+    };
+
+    Gmaps4RailsGoogle.prototype.adaptMapToBounds = function() {
+      var map_center;
+      if (!this.map_options.auto_zoom) {
+        map_center = this.boundsObject.getCenter();
+        this.map_options.center_latitude = map_center.lat();
+        this.map_options.center_longitude = map_center.lng();
+        return this.serviceObject.setCenter(map_center);
+      } else {
+        return this.fitBounds();
+      }
+    };
+
     return Gmaps4RailsGoogle;
 
   })(Gmaps4Rails);

data/public/javascripts/gmaps4rails/gmaps4rails.mapquest.js

@@ -159,6 +159,18 @@
       return this.serviceObject.removeShape(object);
     };
 
+    Gmaps4RailsMapquest.prototype.updateBoundsWithPolylines = function() {};
+
+    Gmaps4RailsMapquest.prototype.updateBoundsWithPolygons = function() {};
+
+    Gmaps4RailsMapquest.prototype.updateBoundsWithCircles = function() {};
+
+    Gmaps4RailsMapquest.prototype.extendMapBounds = function() {};
+
+    Gmaps4RailsMapquest.prototype.adaptMapToBounds = function() {
+      return this.fitBounds();
+    };
+
     return Gmaps4RailsMapquest;
 
   })(Gmaps4Rails);

data/public/javascripts/gmaps4rails/gmaps4rails.openlayers.js

@@ -15,6 +15,7 @@
       this.openMarkers = null;
       this.markersLayer = null;
       this.markersControl = null;
+      this.polylinesLayer = null;
     }
 
     Gmaps4RailsOpenlayers.prototype.createPoint = function(lat, lng) {};
@@ -99,6 +100,7 @@
 
     Gmaps4RailsOpenlayers.prototype.extendBoundsWithMarkers = function() {
       var marker, _i, _len, _ref, _results;
+      console.log("here");
       _ref = this.markers;
       _results = [];
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
@@ -186,19 +188,62 @@
       popup = new OpenLayers.Popup.FramedCloud("featurePopup", feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(300, 200), feature.infoWindow, null, true, this.onPopupClose);
       feature.popup = popup;
       popup.feature = feature;
-      return this.serviceObject.addPopup(popup);
+      return this.map.addPopup(popup);
     };
 
     Gmaps4RailsOpenlayers.prototype.onFeatureUnselect = function(evt) {
       var feature;
       feature = evt.feature;
       if (feature.popup) {
-        this.serviceObject.removePopup(feature.popup);
+        this.map.removePopup(feature.popup);
         feature.popup.destroy();
         return feature.popup = null;
       }
     };
 
+    Gmaps4RailsOpenlayers.prototype.create_polyline = function(polyline) {
+      var clickable, element, latlng, line_points, line_style, polyline_coordinates, strokeColor, strokeOpacity, strokeWeight, zIndex, _i, _len;
+      if (this.polylinesLayer === null) {
+        this.polylinesLayer = new OpenLayers.Layer.Vector("Polylines", null);
+        this.serviceObject.addLayer(this.polylinesLayer);
+        this.polylinesLayer.events.register("featureselected", this.polylinesLayer, this.onFeatureSelect);
+        this.polylinesLayer.events.register("featureunselected", this.polylinesLayer, this.onFeatureUnselect);
+        this.polylinesControl = new OpenLayers.Control.DrawFeature(this.polylinesLayer, OpenLayers.Handler.Path);
+        this.serviceObject.addControl(this.polylinesControl);
+      }
+      polyline_coordinates = [];
+      for (_i = 0, _len = polyline.length; _i < _len; _i++) {
+        element = polyline[_i];
+        if (element === polyline[0]) {
+          strokeColor = element.strokeColor || this.polylines_conf.strokeColor;
+          strokeOpacity = element.strokeOpacity || this.polylines_conf.strokeOpacity;
+          strokeWeight = element.strokeWeight || this.polylines_conf.strokeWeight;
+          clickable = element.clickable || this.polylines_conf.clickable;
+          zIndex = element.zIndex || this.polylines_conf.zIndex;
+        }
+        if ((element.lat != null) && (element.lng != null)) {
+          latlng = new OpenLayers.Geometry.Point(element.lng, element.lat);
+          polyline_coordinates.push(latlng);
+        }
+      }
+      line_points = new OpenLayers.Geometry.LineString(polyline_coordinates);
+      line_style = {
+        strokeColor: strokeColor,
+        strokeOpacity: strokeOpacity,
+        strokeWidth: strokeWeight
+      };
+      polyline = new OpenLayers.Feature.Vector(line_points, null, line_style);
+      polyline.geometry.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
+      this.polylinesLayer.addFeatures([polyline]);
+      return polyline;
+    };
+
+    Gmaps4RailsOpenlayers.prototype.updateBoundsWithPolylines = function() {};
+
+    Gmaps4RailsOpenlayers.prototype.updateBoundsWithPolygons = function() {};
+
+    Gmaps4RailsOpenlayers.prototype.updateBoundsWithCircles = function() {};
+
     Gmaps4RailsOpenlayers.prototype.fitBounds = function() {
       return this.serviceObject.zoomToExtent(this.boundsObject, true);
     };
@@ -207,6 +252,12 @@
       return this.serviceObject.setCenter(this.userLocation);
     };
 
+    Gmaps4RailsOpenlayers.prototype.extendMapBounds = function() {};
+
+    Gmaps4RailsOpenlayers.prototype.adaptMapToBounds = function() {
+      return this.fitBounds();
+    };
+
     return Gmaps4RailsOpenlayers;
 
   })(Gmaps4Rails);

data/spec/dummy/app/views/users/index.html.erb

@@ -32,7 +32,7 @@
   <div id="map" class="gmaps4rails_map"></div> 
 </div>  -->
 <script type="text/javascript" charset="utf-8"> 
-window.onload =alert('ok');
+//window.onload =alert('ok');
 
 //  
 // Gmaps.map = new Gmaps4RailsGoogle();
@@ -85,9 +85,10 @@ window.onload =alert('ok');
                         :options => {"list_container" => "markers_list" }
                        })%>
 <div id="markers_list"></div>
-<%= gmaps(:markers => {:data => @json}, :map_options =>
-    {:auto_adjust => false, :bounds => '[{"lat":42.3124,"lng":-71.1712},{"lat":42.3997,"lng":-71.0531}]', :auto_zoom => false }) %>
-<%#= gmaps(:markers => {:data => @json, :options => {:do_clustering => false, "custom_infowindow_class" => "yellow", :raw => "{ flat: true, draggable: true}" } },
+<%#= gmaps(:map_options => { :auto_adjust => true },
+      :markers => { :data => '[{"lat":42.3124,"lng":71.1712}]', :options => {:do_clustering => true} }) %>
+
+<%= gmaps(:markers => {:data => @json, :options => {:do_clustering => false, "custom_infowindow_class" => "yellow", :raw => "{ flat: true, draggable: true}" } },
           :polygons => {:data =>  '[[
   {"lng": 5.190262, "lat": 25.774252},
   {"lng": 7.118292, "lat": 45.466465},
@@ -116,7 +117,8 @@ window.onload =alert('ok');
 <%#= gmaps(:markers => {:data => @json, :options => {:do_clustering => false, :draggable => true  } },
           :map_options => { :auto_adjust => true, :center_on_user => true, :zoom => 5, :provider => "openlayers", :id => "joe" },
           :scripts => "api",
-          :last_map => false ) %> 
+          :last_map => false)
+           %> 
 <%#= gmaps(:markers => {:data => @json, :options => {:do_clustering => false, :draggable => true  } },
           :map_options => { :auto_adjust => true, :center_on_user => true, :zoom => 5, :id => "joe3", :provider => "mapquest", :provider_key => MAPQUEST_KEY },
           :scripts => "api",
@@ -143,87 +145,88 @@ window.onload =alert('ok');
 //   return "ok";
 // }
 
-    function HomeControl(controlDiv, map) {
-       var chicago = new google.maps.LatLng(41.850033, -87.6500523);
-     
-       // Set CSS styles for the DIV containing the control
-       // Setting padding to 5 px will offset the control
-       // from the edge of the map.
-       controlDiv.style.padding = '5px';
-     
-       // Set CSS for the control border.
-       var controlUI = document.createElement('DIV');
-       controlUI.style.backgroundColor = 'white';
-       controlUI.style.borderStyle = 'solid';
-       controlUI.style.borderWidth = '2px';
-       controlUI.style.cursor = 'pointer';
-       controlUI.style.textAlign = 'center';
-       controlUI.title = 'Click to set the map to Home';
-       controlDiv.appendChild(controlUI);
-     
-       // Set CSS for the control interior.
-       var controlText = document.createElement('DIV');
-       controlText.style.fontFamily = 'Arial,sans-serif';
-       controlText.style.fontSize = '12px';
-       controlText.style.paddingLeft = '4px';
-       controlText.style.paddingRight = '4px';
-       controlText.innerHTML = 'Home';
-       controlUI.appendChild(controlText);
-     
-       // Setup the click event listeners: simply set the map to Chicago.
-       google.maps.event.addDomListener(controlUI, 'click', function() {
-         map.setCenter(chicago)
-       });
-     }
-     
-     Gmaps.map.callback = function(){
-       // Create the DIV to hold the control and call the HomeControl() constructor
-       // passing in this DIV.
-       var homeControlDiv = document.createElement('DIV');
-       var homeControl = new HomeControl(homeControlDiv, Gmaps.map.map);
-     
-       homeControlDiv.index = 1;
-       Gmaps.map.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
-     };
-     
-     
-     var pinkParksStyles = [
-       {
-         featureType: "all",
-         stylers: [
-           { saturation: -80 }
-         ]
-       },
-       {
-         featureType: "poi.park",
-         stylers: [
-           { hue: "#ff0023" },
-           { saturation: 40 }
-         ]
+ //    function HomeControl(controlDiv, map) {
+ //        var chicago = new google.maps.LatLng(41.850033, -87.6500523);
+ //      
+ //        // Set CSS styles for the DIV containing the control
+ //        // Setting padding to 5 px will offset the control
+ //        // from the edge of the map.
+ //        controlDiv.style.padding = '5px';
+ //      
+ //        // Set CSS for the control border.
+ //        var controlUI = document.createElement('DIV');
+ //        controlUI.style.backgroundColor = 'white';
+ //        controlUI.style.borderStyle = 'solid';
+ //        controlUI.style.borderWidth = '2px';
+ //        controlUI.style.cursor = 'pointer';
+ //        controlUI.style.textAlign = 'center';
+ //        controlUI.title = 'Click to set the map to Home';
+ //        controlDiv.appendChild(controlUI);
+ //      
+ //        // Set CSS for the control interior.
+ //        var controlText = document.createElement('DIV');
+ //        controlText.style.fontFamily = 'Arial,sans-serif';
+ //        controlText.style.fontSize = '12px';
+ //        controlText.style.paddingLeft = '4px';
+ //        controlText.style.paddingRight = '4px';
+ //        controlText.innerHTML = 'Home';
+ //        controlUI.appendChild(controlText);
+ //      
+ //        // Setup the click event listeners: simply set the map to Chicago.
+ //        google.maps.event.addDomListener(controlUI, 'click', function() {
+ //          map.setCenter(chicago)
+ //        });
+ //      }
+ //      
+      Gmaps.map.callback = function(){
+        // Create the DIV to hold the control and call the HomeControl() constructor
+        // passing in this DIV.
+        // var homeControlDiv = document.createElement('DIV');
+        // var homeControl = new HomeControl(homeControlDiv, Gmaps.map.map);
+        //       
+        // homeControlDiv.index = 1;
+        // Gmaps.map.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
+        //Gmaps.map.serviceObject.setZoom(1);
+      };
+ //      
+ //      
+      var pinkParksStyles = [
+        {
+          featureType: "all",
+          stylers: [
+            { saturation: -80 }
+          ]
+        },
+        {
+          featureType: "poi.park",
+          stylers: [
+            { hue: "#ff0023" },
+            { saturation: 40 }
+          ]
+        }
+      ];
+ //    
+ // 
+ 
+ Gmaps.map.infobox = function(boxText) {
+  return {
+     content: boxText
+    ,disableAutoPan: false
+    ,maxWidth: 0
+    ,pixelOffset: new google.maps.Size(-140, 0)
+    ,zIndex: null
+    ,boxStyle: { 
+      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/examples/tipbox.gif') no-repeat"
+      ,opacity: 0.75
+      ,width: "280px"
        }
-     ];
-   
-
-
-Gmaps.map.infobox = function(boxText) {
- return {
-    content: boxText
-   ,disableAutoPan: false
-   ,maxWidth: 0
-   ,pixelOffset: new google.maps.Size(-140, 0)
-   ,zIndex: null
-   ,boxStyle: { 
-     background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/examples/tipbox.gif') no-repeat"
-     ,opacity: 0.75
-     ,width: "280px"
-      }
-   ,closeBoxMargin: "10px 2px 2px 2px"
-   ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
-   ,infoBoxClearance: new google.maps.Size(1, 1)
-   ,isHidden: false
-   ,pane: "floatPane"
-   ,enableEventPropagation: false
-}};
+    ,closeBoxMargin: "10px 2px 2px 2px"
+    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
+    ,infoBoxClearance: new google.maps.Size(1, 1)
+    ,isHidden: false
+    ,pane: "floatPane"
+    ,enableEventPropagation: false
+ }};
 
 </script>
  <script type="text/javascript" charset="utf-8">